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
Related
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>
jquery-confirm version: v3.3.0 git:craftpip/jquery-confirm
jsfiddle for tests https://jsfiddle.net/bdtx2ub2/
<div class="jconfirm-buttons">
<button type="button" class="btn btn-info btn-block">Update</button>
<button type="button" class="btn btn-danger btn-block">Delete</button>
<button type="button" class="btn btn-default btn-block">Cancel</button>
</div>
Can you help me... how can I add to div with class jconfirm-buttons my class? Is there are any solution like columnClass or btnClass for this div?
I want to justify my buttons in this div by adding bootstrap class btn-block to make div justified
<div class="jconfirm-buttons btn-block">
<button type="button" class="btn btn-info btn-block">Update</button>
<button type="button" class="btn btn-danger btn-block">Delete</button>
<button type="button" class="btn btn-default btn-block">Cancel</button>
</div>
Before
What I want to do
How can I do this? Is there are any solution without javascript? Or how can I do it with js (thinking that I can justify them binding this javascript on event "onOpen")?
Here jsfiddle link. This solution not good but still work.
onOpenBefore:function(){
this.buttons.close.el[0].parentNode.className+=" btn-block";
},
I am trying to create something like toggle so when user click on 1sideBarMenui want to displayshowMenu` and if click again it should hide it , i think below code should do it , where i am making mistake ?
main.html
<button type="button" ng-click="showSideBarMenu()" tooltip-placement="top" tooltip-popup-delay="300" uib-tooltip="Browse more" class="btn btn-success btn-circle pull-right"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></button>
<div class="sideBarMenu" ng-show="showMenu">
<ul>
<li>
<button type="button" title="start recording" class="btn btn-danger btn-xlarge" ng-click="recordLogs()" ng-disabled="disabledRecBtn"><span class="glyphicon glyphicon-record"></span></button>
</li>
<li>
<button type="button" class="btn btn-primary btn-xlarge" ng-click="stopLogs()" ng-disabled="disabledStopBtn"><span class="glyphicon glyphicon-stop" title="stop recording"></span></button>
</li>
<li>
<!--<button type="button" class="btn btn-success btn-md" ng-click="searchLogs()"><span class="glyphicon glyphicon-search" title="search logs in bowser"></span></button>-->
<button type="button" class="btn btn-info btn-xlarge" ng-click="serverFiles()"><span class="glyphicon glyphicon-folder-open" title="download server logged files"></span></button>
</li>
</ul>
</div>
ctrl.js
$scope.showMenu = false;
$scope.showSideBarMenu = function(){
$scope.showMenu = true;
};
$scope.toggleSideBarMenu = function() { // function name changed to be more semantic
$scope.showMenu = !$scope.showMenu;
};
Note that you don't need to initialize scope vars to false in most cases. Angular treats undefined values and false values the same way in the view.
Is it possible to differentiate between a group of buttons? Given the following buttons.
<div id="slideout_inner">
<h2>Select Size</h2>
<p id="group1">
<button type="button" class="btn btn-primary btn-lg">Small $2.50</button>
<button type="button" class="btn btn-default btn-lg">Medium $3.50</button>
<button type="button" class="btn btn-default btn-lg">Large $4.50</button>
</p>
<h2>Select Milk</h2>
<p>
<button type="button" class="btn btn-default btn-lg">Full</button>
<button type="button" class="btn btn-default btn-lg">Trim</button>
<button type="button" class="btn btn-default btn-lg">Soy</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">Done</button>
<button type="button" class="btn btn-danger btn-lg btn-block cancelOrder">Cancel</button>
</div>
</div>
If I do the following I can highlight the selected button in group1
$('#group1 button').on("click", function(){
$('#group1 button').removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
})
I expect the button list to be dynamic so I want to select buttons with <p> to highlight separately so remove the #group selector and just highlight buttons within each <p>.
So in this example I could highlight Medium $3.50 and then highlight Soy independently.
Try this code:
$(document).ready(function () {
$("button").on("click", function () {
$(this).siblings("button").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
});
});
Try selecting only children of the parent <p> instead of all #group1 buttons.
$(this).parent().find("button").removeClass("btn-primary").addClass("btn-default");
This way you are only accessing a subset of buttons within the parent element, instead of running the query on the entire DOM.
You can use .siblings to select all sibling elements so you can find all sibling elements of the clicked .btn element:
$("p .btn").on("click", function() {
$(this).siblings(".btn").removeClass("btn-primary").addClass("btn-default");
$(this).removeClass("btn-default").addClass('btn-primary');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideout_inner">
<h2>Select Size</h2>
<p id="group1">
<button type="button" class="btn btn-primary btn-lg">Small $2.50</button>
<button type="button" class="btn btn-default btn-lg">Medium $3.50</button>
<button type="button" class="btn btn-default btn-lg">Large $4.50</button>
</p>
<h2>Select Milk</h2>
<p>
<button type="button" class="btn btn-default btn-lg">Full</button>
<button type="button" class="btn btn-default btn-lg">Trim</button>
<button type="button" class="btn btn-default btn-lg">Soy</button>
</p>
<button type="button" class="btn btn-primary btn-lg btn-block">Done</button>
<button type="button" class="btn btn-danger btn-lg btn-block cancelOrder">Cancel</button>
</div>
</div>
You can use :contains() selector to identify which button is clicked. and then use the siblings() selector.
$( "button:contains('Small $2.50')" ).siblings()
Better approach would be to use different classes for each group. But the above should get you going.
I'm building a multiple-choice question web app. There are 5 options for every question. Before a button is clicked it has a default button class: btn btn-default. At the moment I have it so that when a choice is made, all the buttons are deactivated and a div appears where an explanation of the answer is meant to populate.
When a correct answer is selected I want to change the button class to btn btn-success, but if an incorrect answer is selected I want to change the incorrect selection to btn btn-danger and the correct answer to btn btn-warning.
Here's my controller:
.controller('ChoiceCtrl',['$scope', '$http', function($scope, $http){
$scope.choiceb = true;
$scope.isDisabled = false;
$scope.disableClick = function() {
$scope.isDisabled = true;
return false;
}
}])
And here's my HTML:
<div ng-controller="ChoiceCtrl">
<div id="choices">
<h3>Choose your answer:</h3>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#01</button><br>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#02</button><br>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#03</button><br>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#04</button><br>
<button class="btn btn-default choice" ng-click="myApp.choiceb=!myApp.choiceb; disableClick()" ng-disabled="isDisabled" ng-model="isDisabled">Choices#05</button>
</div>
<div id="answer" class="choiceb" ng-if="myApp.choiceb"></div>
<hr>
<div id="rating">
<h4>Rate this question:</h4>
<h4 id="thumbs">
<a href="#">
<i class="glyphicon glyphicon-thumbs-up" id="voteup"></i>
</a>
<a href="#">
<i class="glyphicon glyphicon-thumbs-down" id="votedown"></i>
</a>
</h4>
</div>
<button class="btn btn-primary pull-right choiceb" id="next-question" ng-if="myApp.choiceb">Next Question</button>
</div>
I've been able to use ng-class to change the correct answer to green, but haven't been able to get the incorrect answer to turn red while highlighting the correct answer in orange. Any help would be great. Thank you!