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;"/>
Related
How do I align label element vertically with button.
I am using this hack to make a file button look like the regular bootstrap buttons
Twitter Bootstrap Form File Element Upload Button
The trouble is the button is no longer vertically aligned properly with the the regular buttons. (If I replace the label element with regular button element it looks correct but then of course it does not work.
<div style="padding:0.25em">
<button type="button" title="Select All" name="select_all" class="btn btn-outline-secondary" onclick="selectAll('ARTWORK_TABLE');">
Select All
</button>
<button type="button" title="UnSelect All" name="select_all" class="btn btn-outline-secondary" onclick="unselectAll('ARTWORK_TABLE');">
UnSelect All
</button>
<label class="btn btn-outline-secondary">
Browse
<input type="file" id="fileupload" accept="image/*" onchange="uploadImageFile(this.files);" style="display:none">
</label>
</div>
Using a margin utility class (mt-2) seems to work..
<div class="container">
<div style="padding:0.25em">
<button type="button" title="Select All" name="select_all" class="btn btn-outline-secondary" onclick="selectAll('ARTWORK_TABLE');">
Select All
</button>
<button type="button" title="UnSelect All" name="select_all" class="btn btn-outline-secondary" onclick="unselectAll('ARTWORK_TABLE');">
UnSelect All
</button>
<label class="btn btn-outline-secondary mt-2">
Browse
<input type="file" id="fileupload" accept="image/*" onchange="uploadImageFile(this.files);" style="display:none">
</label>
</div>
</div>
https://www.codeply.com/go/kFHG1BDI1E
So I have 2 buttons but one of them is in a form and is displayed on a new line. Can I align the two buttons in a line without moving the reply button inside the form?
<button class="btn btn-primary btn-xs" data-toggle="collapse"><span class="glyphicon glyphicon-message-forward"></span> Reply</button>
<form action="" method="post">
<input type="hidden" name="comment_id" value="">
<button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button>
</form>
you can add pull-left to the top button to float that button and the inline content in the form will wrap beside it.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="pull-left btn btn-primary btn-xs" data-toggle="collapse"><span class="glyphicon glyphicon-message-forward"></span> Reply</button>
<form action="" method="post">
<input type="hidden" name="comment_id" value="">
<button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button>
</form>
Use display:inline in reply button and display: inline-block; in form.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<button class="btn btn-primary btn-xs" data-toggle="collapse" style="display: inline;">
<span class="glyphicon glyphicon-message-forward"></span> Reply</button>
<form action="" method="post" style="display: inline-block;">
<input type="hidden" name="comment_id" value="">
<button name="delete" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> Delete</button>
</form>
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