I have this code in bootstrap:
<div class="input-group" id="adv-search">
<select class="form-control" >
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
</select>
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="filter">Filter by</label>
<select class="form-control">
<option value="0" selected>All Snippets</option>
<option value="1">Featured</option>
<option value="2">Most popular</option>
<option value="3">Top rated</option>
<option value="4">Most commented</option>
</select>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
I checked my code in http://www.bootlint.com/.
But I have this error:
.input-groupcontains a <select>; this should be avoided as <select>
s cannot be fully styled in WebKit browsers
So I can not use input-group with select!
Is there a standard way to do it in bootstrap?
Bootlint leads you to the error E006 that says
non- .form-control within .input-group
You should use form-group instead of input-group like this:
<div class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
Related
set width 50% each in select tag and remaing part
<div class="input-group">
<select class="form-select">
<option selected value="dummy">Dummy</option>
<option selected value="rd">Random data</option>
</select>
<span class="input-group-text bg-theme">Selection</span>
<div class="dropdown">
<input
type="text"
class="form-control dropdown-toggle"
data-bs-toggle="dropdown"
readonly
/>
<div class="dropdown-menu p-0 w-100">
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" checked />
dummy
</label>
</div>
</div>
</div>
</div>
How can i make select tag with 50% width and remaing part also 50% width ?
Simply you can use the BS5 grid system in order to change the size.
<div class="row g-2">
<div class="col-md">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInputGrid" placeholder="name#example.com" value="mdo#example.com">
<label for="floatingInputGrid">Email address</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select class="form-select" id="floatingSelectGrid">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label for="floatingSelectGrid">Works with selects</label>
</div>
</div>
</div>
I have something like this
<div class="d-flex">
<div class="d-flex flex-column">
<label>ID</label>
<input class="form-control form-control-sm" style="width: 13rem;" />
</div>
<select class="form-control" style="width: 13rem;">
<option value="0">Select...</option>
<option value="1">Other 1</option>
<option value="2">Other 2</option>
</select>
</div>
The select that I have is aligning with the ID label instead of the input. Is there any way I can align it with the input without having to put a label on top of the select?
You can add align-items-end to the flex container (first-example).
If you want them to properly line up you will need to make the select element form-control-sm as well (second example).
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex align-items-end">
<div class="d-flex flex-column">
<label>ID</label>
<input class="form-control form-control-sm" style="width: 13rem;" />
</div>
<select class="form-control" style="width: 13rem;">
<option value="0">Select...</option>
<option value="1">Other 1</option>
<option value="2">Other 2</option>
</select>
</div>
<hr />
<div class="d-flex align-items-end">
<div class="d-flex flex-column">
<label>ID</label>
<input class="form-control form-control-sm" style="width: 13rem;" />
</div>
<select class="form-control form-control-sm" style="width: 13rem;">
<option value="0">Select...</option>
<option value="1">Other 1</option>
<option value="2">Other 2</option>
</select>
</div>
I have edited your code and I think this is a good solution:
<div class="d-flex">
<div class="d-flex flex-column">
<label>ID</label>
<input class="form-control form-control-sm" style="width: 13rem;" />
</div>
<div class="d-flex flex-column">
<label style="color: transparent;">ID</label>
<select class="form-control" style="width: 13rem;">
<option value="0">Select...</option>
<option value="1">Other 1</option>
<option value="2">Other 2</option>
</select>
</div>
</div>
I think you are using bootstrap so I don't know if bootstrap will interfere with my code but try it out anyway.
I'm having an issue with getting my 'Create' button to be right of my dropdownlist. Because the dropdown has a class form-control it makes the width 100% of the space available and so my button wraps underneath. If I remove the class the button sits next to the dropdown.
http://jsfiddle.net/2y39drrh/
Rather than writing a CSS class to override form-control's width, is there a better way? The forms.less file does say to use form-control with <select> elements...
<div class="form-group">
<label class="control-label col-md-1" for="Note_NoteTypeId">Type</label>
<div class="col-md-11">
<select class="form-control" data-val="true">
<option value="">Select...</option>
<option value="3">Option1</option>
<option value="2">Option2</option>
<option value="1">Option3</option>
</select>
<button class="btn btn-success" id="btnCreate" type="button">Create</button>
</div>
</div>
<div class="form-group">
<span class="field-validation-valid text-danger"></span>
</div>
I guess you want something like this?
Example 1
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="input-group">
<select class="form-control" data-val="true">
<option value="">Select...</option>
<option value="3">Option1</option>
<option value="2">Option2</option>
<option value="1">Option3</option>
</select>
<span class="input-group-btn">
<button class="btn btn-success" id="btnCreate" type="button">Create</button>
</span>
</div>
<div class="form-group">
<span class="field-validation-valid text-danger"></span>
</div>
Example 2
<div class="form-inline">
<select class="form-control" data-val="true">
<option value="">Select...</option>
<option value="3">Option1</option>
<option value="2">Option2</option>
<option value="1">Option3</option>
</select>
<input type="button" class="btn btn-success" value="Create">
</div>
I'm not sure why, the code I'm inserting to this post works weird on JSFiddle and SO editor. But it works fine on codepen.io
body {
max-width: 800px;
margin: 0 auto;
padding: 2em;
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6">
<select id="vehicle" name="vehicle" class="form-control" data-dropupauto="false">
<option value=""> 1 </option>
<option value=""> 2 </option> <option value=""> 3 </option>
</select>
</div>
<div class="col-md-6">
<button class="btn btn-success" id="btnCreate" type="button">Create</button>
</div>
</div>
See the example in full page. I believe that's the reason why SO editor and JSFiddle shows different results.
I want to place two select options side by side in my form. I am using Bootstrap 3 but I can't place them with proper alignment.
Here is my HTML code:
<form role="form">
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control"/>
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</div>
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block te" >Prices & Availability</button>
</form>
Use this
jsfiddle http://jsfiddle.net/harshdand/e0fc1ucq/
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
</div>
class form-control in bootstrap has the display value of block. give it the class d-inline-block
<select class="form-control d-inline-block">
I am trying to make my form inline and also trying to reduce the the gutter width between elements in my form. What is the best approach for this?
Here my jsfiddle code and a sample below.
<form class="form-inline" role="form">
<div class="col-lg-3">
<input type="text" class="form-control" placeholder="Put something here">
</div>
<div class="col-lg-3">
<select class="form-control dropdown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3t</option>
</select>
</div>
<div class="col-lg-3">
<select class="form-control dropdown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="col-lg-3">
<button type="submit" class="btn btn-default">submit</button>
</div>
</form>
Your JSFiddle isn't including Bootstrap 3 correctly. Try Bootply.com
Here is the example I made, seems to be working fine http://bootply.com/108144#
In the inline forms the elements need to be wrapped in class="form-group", as far as I can see in the docs.
<form class="form-inline" role="form">
<div class="form-group">
<select class="form-control">
<option>Group 1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option>Group 2</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>