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>
Related
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 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 am using bootstrap and I have a container with a login form.
However, I want to align this form to the left side of the page. However, using float left makes it look ugly and also makes the form input smaller, as you can see here:
http://codepen.io/anon/pen/xZGOjR
<div class="container">
<div class="form-container">
<form class="form-horizontal" name="form" role="form" >
<fieldset>
<div class="form-group">
<div class="btn-icon-lined btn-icon-round btn-icon-sm btn-default-light">
</div>
<input type="email" class="form-control input-lg input-round text-center" placeholder="Email" ng-model="user.email" name="email" ng-required autofocus>
</div>
<div class="form-group">
<div class="btn-icon-lined btn-icon-round btn-icon-sm btn-default-light">
</div>
<input type="password" class="form-control input-lg input-round text-center" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-round btn-block text-center">Log in</button>
</div>
</fieldset>
</form>
</div>
</div>
How can I make it so the form input is to the left side without looking ugly?
To do it the bootstrap way. You could add a column width to the form <div class="form-container text-center col-xs-3">
Here is your original example tidied up a bit http://codepen.io/anon/pen/XXbKvN
Bootstrap uses a 12 column grid system so that everything is nicely laid out on the page. For more info have a look here http://getbootstrap.com/css/#grid-options
You can use width: 350px; to the .form-container class.
It can better, if you can upload your design. screenshot.
I searched a lot and FOUND a few references on STACK but I am posting this anyways (it is a "duplicate" question but the accepted answer doesn't seem to work in any of my cases)
STACK LINK:
bootstrap: align input with button
I can't seem to display a button inline with form-control element (input text),,
I have three versions of the same thing
Fiddle: http://jsfiddle.net/7Cu9w/9/
<div class="form-inline col-xs-4">
<label class="control-label">New Tag: </label>
<input class="form-control"/>
<button type="button" class="btn btn-primary">Add</button>
</div>
<br/><br/>
<div class="form-horizontal col-xs-4">
<label class="control-label">New Tag: </label>
<input name="search" id="search" class="form-control"/>
<button class="btn">button</button>
</div>
<br/><br/>
<div class="input-append col-xs-4">
<label class="control-label">New Tag: </label>
<input name="search" id="search" class="form-control"/>
<button class="btn">button</button>
</div>
I found a variety of similar ideas and answers but no matter what I do, they do not work..
My fiddle:
http://jsfiddle.net/7Cu9w/9/
Can someone please help me with this?
You can use Bootstrap's column properties to specify the layout you would like WITHIN YOUR .form-inline, like so:
JSFiddle.
If that's the property you would like all your input/button pairs to have, I would recommend using an &:extend() and a specific .input-button class in your LESS, but that's how you would go about solving this problem.
Please see this fiddle, where I have a button and three input boxes and I'm using Bootstrap.
<div class='container'>
<div class='row'>
<form class='span10'>
<input type='text' placeholder='Label' id='new-row-label' class='span3'>
<input type='text' placeholder='Orders' id='new-row-orders' class='span2'>
<input type='text' placeholder='Items' id='new-row-items' class='span2'>
<div class='btn span2' id='add-row'>Add new item</div>
</form>
</div>
</div>
Two things are wrong here:
The button is slightly lower than the input box.
The button is on the left hand side, when in my code it appears after the input boxes.
How can I have three input boxes and a button, all aligned at the same height, with the button on the right?
If you add pull-right class with btn like this
<div class='btn pull-right span2' id='add-row'>Add new item</div>
it'll float the button at the right side like this example but it doesn't seems lower to me.
Use the form classes to make an inline form:
<form class="form-inline">
<div class="row">
<input type='text' placeholder='Label' id='new-row-label' class='span3'>
<input type='text' placeholder='Orders' id='new-row-orders' class='span2'>
<input type='text' placeholder='Items' id='new-row-items' class='span3'>
<button type="button" class="btn" id='add-row'>Add new item</button>
</div>
</form>
The class="span10" on the FORM tag was also throwing off the layout.
http://twitter.github.com/bootstrap/base-css.html#forms