With twitter bootstrap, I can get a button to appear the full width of the div by adding the btn-block or form-control classes onto it, like in the example of the first text box below:
<input type="text" class="form-control" placeholder="asdf">
However, when using the Multiple Button input group, I cannot figure out how to get the width of the text box to equal the full width of its container div minus the width of the other 2 "C" and "M" buttons.
Here is the code that I'm using for this second "C/M/textbox" input:
<div class="input-group input-group-sm">
<div class="input-group-btn">
<button type="button" class="btn btn-default"><span class="">C</span></button>
<button type="button" class="btn btn-default"><span class="">M</span></button>
</div>
<input type="text" class="form-control">
</div>
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
Trying to build a 3 control input-group with Bootstrap 3.3.7, however the height of the first addon does not match the following input nor button.
<div class="input-group">
<span class="input-group-addon">Amount</span>
<input type="text" class="form-control" />
<div class="input-group-btn">
<button class="btn">Submit</button>
</div>
</div>
Anyone have a working sample to solve this design?
First and for all where is your <label> tag?
Do you want the submit in your input field? Or the submit button underneath it?
You need also to place form around it and your input can be declared as number because it's amount; your input field also needs a name. A submit button is an input button with type='submit':
example:
<input type="submit" class="btn btn-default" value="submit" id="submit">
You can also declare on your body class='container'
<body class="container">
<form id="youWantToGiveThisAName" class="form-group">
<label for="amountOfSomething"></label>
<div class="input-group">
<span class="input-group-addon">Amount</span>
<input type="number" name="amountOfSomething" id="amountOfSomething" class="form-control" value="0.00000121">
</div>
<div>
<input type="submit" class="btn btn-coinchecker pull-right" value="submit" id="submit">
</div>
</form>
</body>
Here's a fiddle to see the result
I am new to slim and is struggling with getting the textfield and button on the same height. Can anyone help me?
div class="center-div"
= text_field_tag 'txtSlug', t('code.description'), class:'form-control input-lg'
button class="btn btn-primary" onclick="SubmitForm()" = t('code.submit')
Looking at bootstrap's inline forms, you must use form-inline to the "main parent" to make those elements inline and add form-group to the input element parent. So, it should look like.
div class="center-div form-inline"
.form-group
= text_field_tag 'txtSlug', t('code.description'), class:'form-control input-lg'
button class="btn btn-primary btn-lg" onclick="SubmitForm()" = t('code.submit')
Here's a bootply of a similar markup
If you use Bootstrap, you should create an inline form with class form-inline, or even an input-group to join the input and button together.
Here is the documentation: for inline forms and input groups: http://getbootstrap.com/css/#forms-inline
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
I am using bootstrap in my application. I am having a form which contains multiple drop down boxes which are placed inline. The width of the container containing the form is col-lg-12 and is taking the entire screen. Because of the data inside the drop down the last two drop downs are displayed in the second line. I tried giving the max-width property of the select box to 50%. The drop down width reduces but the margin still remains the same. I am not goot at bootstrap. Please let me know where I am going wrong. I am posting the code below:
<form novalidate role="form" name="filterForm" class="form-inline">
<div ng-repeat="criteria in criterias">
<div class="m-b">
<div class="form-group s-b">
<span>Country</span>
<select class="form-control" ng-options="item for item in country" name="country" ng-model="classification.country">
</select>
</div>
<div class="form-group s-b">
<span>State</span>
<select ng-options="item for item in state" class="form-control" name="state" ng-model="criteria.state" style="max-width:50%">
</select>
</div>
<div class="form-group s-b">
<span>City</span>
<select class="form-control" ng-options="item for item in Cities" name="account" ng-model="criteria.city" style="max-width:50%;">
</select>
</div>
<div class="form-group s-b">
<span>Predicate</span>
<select class="form-control" name="account" ng-model="criteria.predicate">
<option value="matches">Matches</option>
<option value="not-matches">Not Matches</option>
</select>
</div>
<div class="form-group s-b">
<span>Value</span>
<select class="form-control" name="account" ng-model="criteria.value" style="min-width:100px;">
</select>
</div>
<div class="form-group">
<span>
<button class="btn btn-sm btn-primary pad-btn" type="submit" ng-click="addCriteria()"><i class="fa fa-plus"></i>
</button>
<button class="btn btn-sm btn-danger pad-btn" type="submit" ng-click="deleteCriteria(criteria)"><i
class="fa fa-minus"></i></button>
</span>
</div>
</div>
</div>
<button class="btn btn-sm btn-primary pad-btn align-center" type="submit" ng-click="searchParams(filterForm)">Submit
<i class="fa fa-check"></i></button>
<button class="btn btn-sm btn-warning pad-btn align-center" type="submit" ng-click="resetFilter()">Reset
<i class="fa fa-reply"></i></button>
</form>
Try adding a class
Since your data is too big you should try adding a class that modifies the position of the dropdowns, since they are absolute they should be easy to move around to where you want.
Explanation of bootsraps column system
If you set your class col-xs-12 it will be bull width all the way from mobile to big desktop
If you set your class to col-xs-12 col-lg-6 then xs, sm and md will all be full width but lg will be half width.
try using shoe lace to model your column setup.
Note
You should check out ui.bootstrap since you're using angular.js. It removed the use of jQuery so you don't run into any compatibility issues or strange bugs.
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.