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.
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 a Bootstrap Template (INSPINIA), and integrating it with PHP.
All of the sample data structures use buttons, but to make these interact with the server I need to change them to a submit and wrap them in a form.
Can I best retain the original bootstrap styling of a button, but gain the functionality of a form submit without having to amend bootstraps own CSS?
Original Bootstrap code:
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
What I have ended up with:
<div class="input-group">
<form action="index.php" method="post">
<span class="input-group-btn">
<input type="text" placeholder="Add new task. " name="ToDo" class="input input-sm form-control">
<input type="submit" class="btn btn-sm btn-white" value="Add Task" name="addToDo" />
</span>
</form>
</div>
The above code doesn't look the same and shows some odd behaviour on smaller devices.
You can just change the type of the button to submit, and you're good to go:
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
You have to add the form tag outside input-group to keep the styling:
<form action="index.php" method="post">
<div class="input-group">
<input type="text" placeholder="Add new task. " class="input input-sm form-control">
<span class="input-group-btn">
<button type="submit" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> Add task</button>
</span>
</div>
</form>
I'm exploring the Materialize CSS library, and I'm having some issues with the waves effect class.
When added to a button it blurs the form it is in.
This is the form without the waves-effect:
After adding the waves-effect it gets blurry:
My html looks like this:
<div class="login-form centered">
<h1><i class="fa fa-user menu-icon"></i> Login</h1>
<form role="form">
<div class="form-group">
<input type="text"
class="form-control"
ng-model="alc.user.username"
id="username"
placeholder="Username"/>
</div>
<div class="form-group">
<input type="password"
class="form-control"
id="password"
ng-model="alc.user.password"
placeholder="Password"/>
</div>
<button type="submit"
class="waves-effect btn"
ng-click="alc.login(alc.user.username)">Sign in
</button>
<button type="submit"
class="waves-effect btn"
ng-click="alc.register()">Register
</button>
</form>
</div>
When checking the css attributes inherited from the class, I noticed that what's causing the blur is: will-change: opacity, transform;
After removing it the text returned to normal.
So my question is, why is this happening?
and how to apply the effect without the side effect?
Edit:
I've checked in chrome firefox and explorer, and the issue only occurs on chrome.
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.