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
Related
I have a Bootstrap DateTimePicker inside a label, but the picker is hidden inside the label. I have successfully done this with a select box, but can't seem to get this to work. The DateTimePicker displays after clicking the checkbox. How do I bring this forward so it displays properly?
Hidden DateTimePicker image
<div class="form-group col-md-4">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label for="enddate" class="btn btn-outline-primary">Set End Date
<input type="checkbox" name="set_end_time" id="set_end_time">
<input type="text" class="datetimepicker btn btn-secondary dropdown-toggle" name="end_time" style="display: none" aria-haspopup="true" aria-expanded="false"/>
</label>
</div>
</div>
I am trying to put a search bar with three buttons on my site. The buttons represent 3 different searches (so they will be more like toggles).
I tried this code, but the output wasn't as expected:
<div class="row search-row">
<div class="col-lg-6">
<div class="input-group"><span class="input-group-btn"><button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span></button></span><span class="input-group-btn"><button class="btn btn-default" type="button">
<input id="file-button" src="text.png" type="image"></button></span><span class="input-group-btn"><button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-file"></span>
</button></span><input class="form-control" type="text"><span class="input-group-btn"><button class="btn btn-default" type="button" value="Go"></button></span>
</div>
</div>
</div>
Here is a screen shot, the top is unedited, the bottom is me trying to call attention to the issues:
How do I get the buttons and the text to all look like the same input (flush with no bumps)?
This code fixes it:
<div class="container">
<div class="row search-row">
<div class="container col-lg-6">
<div class="input-group"><span class="input-group-btn"><button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span></button><button class="btn btn-default" type="button">
<input id="file-button" src="text.png" type="image"></button><button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-file"></span>
</button></span><input class="form-control" type="text"><span class="input-group-btn"><a class="btn btn-default go-search" href="#">Go</a></span>
</div>
</div>
</div>
</div>
Screenshot:
Basically, there should be one button group span for all the buttons on the left. I changed the "go" button to be a link since thats what I really need it to be anyway.
I have this bit of bootstrap code below:
<form class="navbar-form ">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" name="query" ng-model="query">
</div>
<button type="button" class="btn btn-default" ng-click="queryresult()"><span class="glyphicon glyphicon-search"></span></button>
</form>
But my problem is when I resize my browser below 767 pixels wide the nice pretty search bar looks like so:
I want the search icon to the right of the search field how do I do that?
In bootstrap 3, the following should work (I'd suggest you paste the below code as is, as I have changed a few class names):
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="query" ng-model="query">
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="queryresult()">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
Original source from Bootstrap: http://getbootstrap.com/components/#input-groups-buttons
EDITED: As far as I know, there is no "bootstrap" way to separate the field and the button keeping them on the same line all the time. To work around that, you could set your input's style to width:95% (for example) and class pull-left, then give your button a class of pull-right, like this:
<input type="text" class="form-control" placeholder="Search" name="query" ng-model="query" style="width:95%; float:left">
...
<button type="button" class="btn btn-default" ng-click="queryresult()"><span class="glyphicon glyphicon-search" style="float:right"></span></button>
...though it's not necessarily going to look perfect in every case. You may have to fiddle around with it a little bit until you get the desired result.
I am VERY new to Watir, trying to test a popup window and am unable to get my script to click the Cancel Target button. When running the script, I get an error: element not visible (Selenium::WebDriver::Error::ElementNotVisibleError. This is the script I am using:
browser.div(:class => "modal-footer").button(:class => "btn btn-danger").click
Below is the code:
<div class="modal hide fade" id="target_modal" data-bind="with: target">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 data-bind="text: BusinessName"></h3>
</div>
<div class="modal-body">
<div class="row">
<div class="span3">
<label for="FirstName">First Name</label><input id="FirstName" type="text" data-bind="value:FirstName" />
<label for="LastName">Last Name</label><input id="LastName" type="text" data-bind="value: LastName" />
<label for="Email">Email</label><input id="Email" type="text" data-bind="value: Email" />
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bind="click: saveTarget">
<i class="icon-white icon-ok"></i>
Save Target
</button>
<button class="btn btn-danger" data-dismiss="modal">
<i class="icon-white icon-remove"></i>
Cancel Target
</button>
</div>
</div>
Any help would be greatly appreciated. Thanks!
I assume that this popup is part of the page (ie just an div tag overlaying the rest of the page), rather than a new browser window popup.
My guess is that Watir is trying to click the button before the popup finishes being displayed. Explicitly telling Watir to wait for the button may solve the problem:
cancel_button = browser.div(:class => "modal-footer").button(:class => "btn btn-danger")
cancel_button.when_present.click
I got it to work. Justin Ko's 1st answer got me thinking and this worked:
cancel = browser.div(:id => "target_modal")
cancel.div(:class => "modal-footer").button(:class => "btn btn-danger").i(:class => "icon-white icon-remove").click
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