I am trying to add a sorting column with active / inactive sort on a column.My idea is to either gray-out the inactive columns or highlight the active column in a grid . I tried sth like this
<button type="button" class="btn btn-default btn-sm">
Order By Status <span class="glyphicon glyphicon-sort"></span>
</button>
Demo
I am not finding a way to highlight or gray-out icons for active/inactive state.
Add the disabled attribute to the button, and the font color will change to gray (including the font icon)
<button type="button" class="btn btn-default btn-sm" disabled>
Order By Status <span class="glyphicon glyphicon-sort"></span>
</button>
If you don't want to actually disable the button, Bootstrap provides a "disabled" class:
<button type="button" class="btn btn-default btn-sm disabled">
Order By Status <span class="glyphicon glyphicon-sort"></span>
</button>
Working fiddle: http://jsfiddle.net/ssorallen/JuCU6/2/
Related
https://coreui.io/demo/React_Demo/#/buttons/buttons
Why do the buttons in the 'Options' card have space between them and the rest of the cards do not?
The CSS is identical of the button's, and the container card
No-one in my office can find the cause.
I have moved the Options card to a different location in the DOM and that makes no difference.
The difference is in the HTML, not the CSS
The first 'Options' card has whitespace between the buttons and the rest do not.
<div class="card-body"><button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-link">Link</button> </div>
I have this button:
<button type="button" style="margin-bottom: 5px;" class="btn btn-danger btn-default btn-gray btn-primary btn-primary2 btn-success2 btn-warning btn-black btn-success btn_bottom_padding" data-toggle="modal" data-target="#myModal" data-bind="css: {'btn-gray': IsGray(), 'btn-danger': IsRed(),'btn-success':IsGreen(), 'btn-primary': IsBlue(),'btn-success2':IsLimegreen(), 'btn-primary2': IsSkyblue(),'btn-warning':IsOrange(),'btn-black': IsBlack(),'btn-default':IsWhite()},click:$root.GetClick">
<span data-bind="text:ShortName()"></span>
<span data-bind="visible: IsRed()" class="fa fa-exclamation-triangle"></span>
#*<span data-bind="" class="fa fa-bolt"></span>*#
</button>
The thing is I wanted to add multiple icons to it like:
I only managed to add the exclamation triangle icon, but if I tried to add another one neither the first one would not appear. Is there any way that I can add all those four icons like in the attached button image?
Just add them in separate spans: Example
<span class="fa fa-exclamation-triangle"></span>
<span class="fa fa-bar-chart"></span>
<br>
<span class="fa fa-bolt"></span>
<span class="fa fa-ban"></span>
I want to have hotkeys using accesskey.
Let's say I have this (it's AnguarJs but that doesn't matter):
<button type="button" class="btn btn-outline btn-default"
ng-click="CancelCampaignEdit();" accesskey='n'
style="margin-right:10%">Cancel</button>
As you can see, I want to assign the hotkey n to this button. How could I underline the n in Cancel using CSS?
You can add a span tag with text-decoration:underline if you want add extra styling. Otherwise use tag
<button type="button" class="btn btn-outline btn-default"
ng-click="CancelCampaignEdit();" accesskey='n'
style="margin-right:10%">Ca<u>n</u>cel</button>
<button type="button" class="btn btn-outline btn-default"
ng-click="CancelCampaignEdit();" accesskey='n'
style="margin-right:10%">Ca<span style="text-decoration: underline;">n</span>cel</button>
I have a button group containing 10 buttons. Under certain screen widths (responsive) I hide some of these buttons with media queries.
The problem is that if I hide the last button the new last button's edges do not become rounded.
It's a difficult problem to describe, but very easy to show in a Fiddle.
My question: how can I add the rounded corners to the last visible button in the button group, rather than simply the last button, as it currently is.
Code from Fiddle below, as per SO's rules:
<div class="btn-group" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
<div class="btn-group" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default" style="display:none;">Sixth</button>
</div>
Note the lack of rounded corners on 'fifth' in the second button group.
I can do this using JavaScript by adding a new class to the last visible element, but I'd rather not. Is there a cleaner CSS-only solution?
If you don't mind adding a dependency, I recommend AngularJS' ng-if. It comes in handy when using css selectors that rely on an element's position within the DOM, such as the :first-child or :last-child pseudo-classes. It will remove the element from the DOM and allow you to achieve your goal.
Here's a solution using jQuery:
$('.btn-group').has('.btn:hidden').find('.btn').css('border-radius', 0);
$('.btn-group').has('.btn:hidden').find('.btn:visible:first').css({
'border-top-left-radius': '3px',
'border-bottom-left-radius': '3px',
});
$('.btn-group').has('.btn:hidden').find('.btn:visible:last').css({
'border-top-right-radius': '3px',
'border-bottom-right-radius': '3px',
});
For each button group with hidden buttons, this will remove the border radii for all buttons within, and then add back border radii for the first and last visible buttons.
OP's Fiddle with solution
One option is to simply duplicate the code and add an hidden-xs class the first code block and visible-xs to the other code block.
Like this:
<div class="btn-group hidden-xs" id="sortBtns" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Second</button>
<button type="button" class="btn btn-default">Third</button>
<button type="button" class="btn btn-default">Fourth</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
<div class="btn-group visible-xs" id="sortBtns2" role="group">
<button type="button" class="btn btn-default">First</button>
<button type="button" class="btn btn-default">Fifth</button>
<button type="button" class="btn btn-default">Sixth</button>
</div>
Another option is to apply the css rule to the edgy element:
.edgy-right-element {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
I'm using Bootstrap 2.3.2 and I can't seem to get radio buttons to work. I'm using the code from Bootstrap's website:
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
What do I need to do from here? With this I get 3 buttons, but clicking them doesn't change them to active and they don't look like they've been clicked.
EDIT:
If I initialize the buttons in JS like so:
$('.btn-group').button();
This markup is generated for the group:
<div class="btn-group ui-button ui-widget ui-state-default ui-corner-all
ui-button-text-only" data-toggle="buttons-checkbox"
role="button" aria-disabled="false">
<span class="ui-button-text">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</span>
</div>
Compared to this on the bootstrap website:
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary active">Right</button>
</div>
Not sure why it's working different here.
Looking in Bootstrap 2.3.2 doc (see Usage section), you need to initialize your buttons :
$('.btn-group').button();
Working example based on your code
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
Make sure to incluse the right class names and attach the stylesheet in the header