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>
Related
If I put several Bootstrap 3 buttons in a row:
<button class="btn btn-default">Button 1</button>
<button class="btn btn-default">Button 2</button>
<button class="btn btn-default">Button 3</button>
there is a small space between them. Where does it come from and how to remove it without using float? According to the Firebug and Chrome Inspector the buttons haven't any margin applied to them.
The newline between the buttons actually causes the space. Observe:
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>
There is a button-group rule you can use if you want the buttons visually grouped: http://getbootstrap.com/components/#btn-groups
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
I believe you style your buttons display:inline-block; or inline. By default they create spaces if you have newline character.
So to remove it, put those markups next to each other without newline char.
It would get messy, but will get what you want without having a style float
So do it like this :
<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>
How can I adjust the length of bootstrap buttons without adjusting its width/height? Whenever I adjust the width, It gives me wrong output.
<button type="button" class="btn btn-primary">Primary</button>
It's not clear what you mean by "length" but Bootstrap has set sizes for it's buttons
"extra-small", "small", "default" and "large"
as defined by btn-xs btn-sm, btn-default and bth-lg
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-default btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-primary">Primary</button>
However, there is noting to stop you adding your own customer widths by adjusting the left/right padding.
EG.
.btn-wide {
padding-left: 3em;
padding-right: 3em;
}
JSfiddle Demo
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 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/
I have two buttons in html5,. I want that both should be displayed on same line, but they are coming in different line. what should i do. I have placed my code below :
<input type="button" class="btn btn-danger" id="stop" style="width:50%;"/>
<input type="button" class="btn btn-reset" id="reset" style="width:50%"/>
Add float:left; in your input button
Fiddle - http://jsfiddle.net/wWYgZ/2/
Use width:49% in both buttons.
Demo here
try this :
<input type="button" class="btn btn-danger" id="stop" style="width:50%; display:inline-block;"/>
<input type="button" class="btn btn-reset" id="reset" style="width:50%; display:inline-block;"/>