We Keep Coding

button group wraps label at full width bootstrap

I have run into an issue I hope you can help solve.
I have a button group which when the browser expanded 100% wraps around the label. What is the best method to stop this happening. As I do not want the button group wrapping the label.
see html below.
<div class="form-group">
<label for="selectme" class="form-control-label">add and remove me</label>
<div class="btn-group btn-group-sm" role="group">
<input name="selectme" id="selectme" placeholder="add and remove me" class="form-control" type="text">
<button onclick="addItem()" type="button" class="btn btn-success btn-sm">
<i class="fa fa-plus-circle"></i> Add
</button>
<button onclick="removeItem()" type="button" class="btn btn-secondary btn-sm">
<i class="fa fa-minus-circle"></i> Remove
</button>
</div>
<ul class="list-group" id="my-list">
</ul>
</div>

Does simply adding <br> after your input solve your issue? like this:
<div class="form-group">
<label for="selectme" class="form-control-label">add and remove me</label>
<div class="btn-group btn-group-sm" role="group">
<input name="selectme" id="selectme" placeholder="add and remove me" class="form-control" type="text"><br>
<button onclick="addItem()" type="button" class="btn btn-success btn-sm">
<i class="fa fa-plus-circle"></i> Add
</button>
<button onclick="removeItem()" type="button" class="btn btn-secondary btn-sm">
<i class="fa fa-minus-circle"></i> Remove
</button>
</div>
<ul class="list-group" id="my-list">
</ul>
</div>

Changing button classes in Angular UI Datepicker

In this plunk I have an Angular UI Datepicker that uses a template. I need to change the colors of the "Today", "Clear" and "Close" buttons but changing them in popup.html doesn't work. It should show gray, orange and blue buttons.
I changed from
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-info uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-danger uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-success pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
to
<li ng-if="showButtonBar" class="uib-button-bar">
<span class="btn-group pull-left">
<button type="button" class="btn btn-sm btn-default uib-datepicker-current" ng-click="select('today', $event)" ng-disabled="isDisabled('today')">{{ getText('current') }}</button>
<button type="button" class="btn btn-sm btn-warning uib-clear" ng-click="select(null, $event)">{{ getText('clear') }}</button>
</span>
<button type="button" class="btn btn-sm btn-primary pull-right uib-close" ng-click="close($event)">{{ getText('close') }}</button>
</li>
Note that I changed the button class names to change the color, but when I inspect in the browser, the datepicker is still using the old classes. How to fix this?

To set a custom popup template use datepicker-popup-template-url attribute, for example:
<input datepicker-popup-template-url="popup.html" type="text" class="form-control" is-open="true" ng-model="dt" uib-datepicker-popup="MM-dd-yyyy"
datepicker-options="dateOptions" close-text="Close" popup-placement="bottom-left" on-open-focus="false" />
Demo

Change text of element that contains other elements

I have markup like this:
<li data-id="1">
<button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
random text
<input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again">
</button>
</li>
I want to change the text "random text" to "something else".
I am able to find the text node:
$li.find('button').first().contents().filter(function() {
return this.nodeType == 3;
}).text();
But how can I change the text? When I pass an argument to text like text('something else'), nothing changes.

I would probably put the text in its own container like
<div id='changeableText'>Random Text</div>
and then just access it directly with
$('#changeableText').text('New text!');
to accomplish this.

Updated
You can select Just the text() of the button and change it.
Note: This will not work if more that one non marked up texts exists. E.g.
<li data-id="1">
<button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
random text
<input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again">
another random text
</button>
</li>
Otherwise her is a
working demo:
var getNonMarkedUpText = $('button').text().replace(/^\s+|\s+$|\s+(?=\s)/g, "");
$('button').html($('button').html().replace(getNonMarkedUpText, 'something else'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li data-id="1">
<button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
random text
<input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again">
</button>
</li>

Try this:
<li data-id="1">
<button type="button" class="btn btn-default btn-md" style="margin: .25em; padding: .25em;">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
<span id="txt1">random text</span>
<input type="hidden" name="global_filter[default_fields][][apple]" value="random text_again">
</button>
</li>
That way, you can go:
document.getElementById("txt1").innerText = "txet modnar";
Or
$("#txt1").text("tandom rext");

submit on <input> calls func in ng-click

This snippet of code I am using as template:
<div class="input-group input-group-sm date-time-with-arrows" style="width:100%">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="prevDay()"> <i class="fa fa-angle-left "></i></button>
</span>
<div id="input" class="input-group input-group-sm nested-group" ng-model="model">
<input class="form-control input-sm" ng-disabled="disabled" type="text" ng-attr-placeholder="{{configuration.noSelectionLabel}}" />
<span class="input-group-btn after-date-input">
<button class="btn btn-default pick-cal" ng-disabled="isDisabled" type="button">
<span class="glyphicon glyphicon-calendar"></span>
</button>
</span>
</div>
<span class="input-group-btn after-date-input">
<button class="btn btn-default" ng-click="nextDay()"> <i class="fa fa-angle-right"></i></button>
</span>
</div>
Note functions in tags button prevDay() and nextDay(). When I change date in input and press enter, prevDay() function is called and I have no idea why.

If you don't specificy a type="button" for a <button>, it will default as a submit button.
The button with function prevDay() on it is the first one, which will be used when you hit enter.
Just add type="button" to your <button>s and it will work.

I almost got insane for this just a couple of days ago...
The reason is that angular submits form on click of every button that is not of type="button".
If you change to <button type="button" class="btn btn-default" ng-click="nextDay()"> <i class="fa fa-angle-right"></i></button> it should work.

Bugs with button+tooltip "pull-effect"

When I move cursor on a camera, button is pulling. Why? Can I solve this problem?
http://jsfiddle.net/uDj9p/
<div class="input-group-btn advanced-group">
<button class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Отправить картинку">
<span class="glyphicon glyphicon-camera"></span>
</button><button class="btn btn-default">
<span class="glyphicon glyphicon-file"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-facetime-video"></span>
</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-bullhorn"></span>
</button>
</div>

Try adding the following CSS:
.btn {
margin: 0 !important;
}
http://jsfiddle.net/uDj9p/15/
Sometimes there is a little flicker but not sure what's causing that yet.