Bootstrap select in input group - html

So I just bought this theme "My City", and it's bootstrap based. The problem is that it has a search box, with a dropdown button next to it. I want it to be a select instead of a button. Currently if I simply change from to it will not be in the input group anymore and it will not be bounded to the search box. Here you can see a preview of the theme.
You can see a dropdown with "Market" typed on it. It currently is a dropdown, but I want it to be a select.
Here is the input group's code:
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn btn_cat">
<button type="button" class="btn btn-default dropdown-toggle" datatoggle="dropdown" aria-expanded="false">
<span><i class="fa fa-shopping-cart"></i>Market<span class="caret"></span></span>
</button>
<ul class="dropdown-menu dropdown-menu-right place_dd" role="menu">
<li><a class="cinema"><i class="fa fa-film"></i>Cinema</a></li>
<li><a class="club"><i class="fa fa-beer"></i>Club</a></li>
<li><a class="cafe"><i class="fa fa-cutlery"></i>Cafe</a></li>
<li><a class="sport"><i class="fa fa-futbol-o"></i>Sport</a></li>
<li><a class="port"><i class="fa fa-life-ring"></i>Port</a></li>
<li><a class="bank"><i class="fa fa-university"></i>Bank</a></li>
<li><a class="post"><i class="fa fa-envelope-o"></i>Post</a></li>
<li><a class="showplace"><i class="fa fa-eye"></i>Showplace</a></li>
<li><a class="park"><i class="fa fa-leaf"></i>Park</a></li>
</ul>
</div>
<div class="input-group-btn btn_promo_search">
<button type="button" class="btn btn-success">Search</button>
</div>
</div>

The mark-up in your html is incorrect.
Basic markup for select looks like this.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
I hope this helps.

Related

How can i make bootstrap dropdown menu to open/expand upwards instead of downwards

Here's my HTML code and it has default bootstrap CSS, which expands/opens dropdown options downwards.
<div class="col-md-4 form-group">
<label>{{'crm.crmpopup.newCustomer.cardType'|translate}}:</label>
<div class="input-row">
<select class="form-control" chosen name="cardType" ng-model="pageData.customer.cardType">
<option value="Visa">{{'crm.crmpopup.newCustomer.visa'|translate}}</option>
<option value="MasterCard">{{'crm.crmpopup.newCustomer.masterCard'|translate}}</option>
<option value="AmericanExpress">{{'crm.crmpopup.newCustomer.americanExpress'|translate}}</option>
<option value="DinersClub">{{'crm.crmpopup.newCustomer.dinersClub'|translate}}</option>
<option value="Discover">{{'crm.crmpopup.newCustomer.discover'|translate}}</option>
<option value="EnRoute">{{'crm.crmpopup.newCustomer.enRoute'|translate}}</option>
<option value="JCB">{{'crm.crmpopup.newCustomer.jcb'|translate}}</option>
</select>
</div>
</div>
How can i make bootstrap dropdown menu to open/expand upwards?
The default select HTML tag is limited in what it can do. You have to used a custom setup for this. The following Bootstrap code will create a dropdown going up instead of down.
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">Dropup</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Notice the dropup class. This is what allows it to go up instead of down. You can view the Bootstrap documentation that refers to that here.
Following code worked for me :
<select class="selectpicker dropup" data-dropup-auto="false">
<option>1</option>
<option>2</option>
<option>3</option></select>
Note: Applying the 'dropup' class only works if 'dropupAuto' is set to false.
You are using a select menu. You need to get rid of it and use the bootstrap dropdown.
Use the following code:
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">Dropup</button>
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Below is working example that uses Bootstrap 3.3.7. Reference
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropup class makes the dropdown menu expand upwards instead of downwards:</p>
<br><br><br>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li class="divider"></li>
<li>About Us</li>
</ul>
</div>
</div>

bootstrap input group select field,text field and search field

I want to build search bar similar to amazon site.
A select input field followed by input field followed by search button.
this is what I have got so far:
The issue is that the button1 dropdown is not a select input field if I do change to input field everything breaks.
examples in bootstrap site dont show group with input field select but dropdown menu.
my code
<div class="input-group input-group-lg">
<input type="text" name="query" class="form-control" placeholder="Search this site" />
<span class="input-group-btn">
<button type="button" class="btn btn-primary dropdown-toggle custom" data-toggle="dropdown">Button 1 <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
<button class="btn btn-primary" type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
css - to remove curve radius for center input field or buttons
.custom{
-webkit-border-radius: 0px !important;
-moz-border-radius: 0px !important;
border-radius: 0px !important;
}
Please have look at my demo. If you want add your style then add class to components to change there style.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-md-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Apps & Games <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
</div>
</div>
</div>
I got it solved just amazon like search using this:
<div class="input-group my-group">
<select id="filter_type" name="filter_type" class="selectpicker form-control" style="width:30%;">
<option value>Select Filter Type..</option>
<option value="all">All</option>
<option value="firstname">First Name</option>
<option value="lastname">Last Name</option>
<option value="email">Email</option>
</select>
<select id="search" name="search" class="selectpicker form-control" disabled="disabled" style="width:70%; display:block;">
<option value>select filter type first</option>
</select>
<input type="text" class="form-control" style="width:70%; display:none" name="searchfield" id="searchfield" placeholder="Enter username...">
<span class="input-group-btn">
<button id="submit" name="submit" class="btn btn-primary" disabled="disabled" type="submit">Filter</button>
</span>
</div>
Just right click the amazon search bar and check out the code behind.

Bootstrap 3 dropdown select value

I am trying to create a dropdown menu using select with a value/options. How can I do this using Bootstrap?
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="type" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Please Select
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="type">
<li>General User</li>
<li>Service Provider</li>
<li role="separator" class="divider"></li>
<li>Admin</li>
</ul>
</div>
For form components such as select bootstrap use .form-control, see docs here and see select docs example here
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<select class="form-control">
<option value="General User">General User</option>
<option value="Service Provider">Service Provider</option>
<option value="Admin">Admin</option>
</select>

How do I create a button group with a select, button, button-dropdown and addon with bootstrap

I am trying to create a a group of controls with bootstrap however it does not seem to be rendering properly, I have an example here: https://jsfiddle.net/brightertools/jxafnoyx/
Code:
<form id="form" name="form" action="" method="post">
<div class="container">
<div class="form-group">
<label class="control-label" for="SelectOption">Select an Option</label>
<div class="input-group">
<select id="SelectOption" name="SelectOption" class="form-control">
<option value="">(select your option)</option>
</select>
<div class="input-group-btn ">
<button type="button" class="btn btn-default glyphicon glyphicon-plus" style="margin-top:-1px;" id="AddButton"></button>
<button type="button" class="btn btn-default dropdown-toggle glyphicon glyphicon-cog" style="margin-top:-1px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="GroupDropdown"></button>
<ul class="dropdown-menu">
<li><a id="EditLink">Edit</a>
</li>
<li><a id="DeleteLink">Delete</a>
</li>
</ul> <span class="input-group-addon"><span class="validation-icon glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
</div>
</div>
</form>
One can see that the addon is wrapping, I cannot seem to fix this issue.
Current rendering within jsfiddle:
As Onkar Deshpande mentioned correctly in his comment
"multiple form-controls in a single input group are not supported".
Input groups
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
But there is a little work around you could use to make this work.
Just make sure to move your input-group-addon out of the input-group-btn div.
To make this look correct you would have to also remove the border-radius on the .btn class.
.btn {
border-radius: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form id="form" name="form" action="" method="post">
<div class="container">
<div class="form-group">
<label class="control-label" for="SelectOption">Select an Option</label>
<div class="input-group">
<select id="SelectOption" name="SelectOption" class="form-control">
<option value="">(select your option)</option>
</select>
<div class="input-group-btn ">
<button type="button" class="btn btn-default glyphicon glyphicon-plus" style="margin-top:-1px;" id="AdvertiserEditButton"></button>
<button type="button" class="btn btn-default dropdown-toggle glyphicon glyphicon-cog" style="margin-top:-1px;" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="AdvertiserDropdown"></button>
<ul class="dropdown-menu">
<li><a id="AdvertiserEditLink">Edit</a>
</li>
<li><a id="AdvertiserDeleteLink">Delete</a>
</li>
</ul>
</div>
<span class="input-group-addon"><span class="validation-icon glyphicon glyphicon-asterisk"></span></span>
</div>
</div>
</div>
</form>
You can try like this: Demo
<div class="input-group">
<select id="SelectOption" name="SelectOption" class="form-control">
<option value="">(select your option)</option>
</select>
<div class="input-group-btn">
<button type="button" class="btn btn-default "><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="btn btn-default dropdown-toggle " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="AdvertiserDropdown"><i class="glyphicon glyphicon-cog"></i></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<span class="input-group-addon validation-icon glyphicon glyphicon-asterisk"></span> </div>
<!-- /.input-group -->

How to make a Bootstrap dropdown required?

So, I've got following code for a dropdown box made with bootstrap:
<div class="btn-group">
<button id="landKapitein" type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Land
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a role="menuitem" tabindex="-1" href="#">België/Belgique</a></li>
<li><a role="menuitem" tabindex="-1" href="#">Deutschland</a></li>
<li><a role="menuitem" tabindex="-1" href="#">France</a></li>
<li><a role="menuitem" tabindex="-1" href="#">Nederland</a></li>
<li><a role="menuitem" tabindex="-1" href="#">United Kingdom</a></li>
</ul>
</div>
Now I want to make it required to select something from this dropdown box before you can continue on. I've already done this for textboxes and radio buttons by just adding required to the tag, but I don't have a tag like that here, so how do I do this then?
If we just put required in select tag and <option value="">None</option> in the option it will work for validation. I have refer this page.
It works for selection must be made among provided value.
But I would like to know how to write custom validation message coming by default like this message.?
<form action="demo_form.asp">
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
Above code works fine for validation like "Selecting an item in the list before submit".
Use this code if you want to required Bootstrap drop down select
<select id='terms' class='form-control' required>
<option selected disabled>Select </option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
Could you just use a select element instead and apply required to its tag?
<select class="form-control" required>
<option>België/Belgique</option>
<option>Deutschland</option>
<option>France</option>
<option>Nederland</option>
<option>United Kingdom</option>
</select>
See this SO question in particular.
In CSS:
.btn.btn-default.dropdown-toggle.is-invalid {
border-color: #dc3545;
}
In HTML:
<input type="hidden" class="form-control" name="idType" required />
<div class="btn-group">
<button id="landKapitein" type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Land
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a role="menuitem" tabindex="-1" href="#">België/Belgique</a></li>
<li><a role="menuitem" tabindex="-1" href="#">Deutschland</a></li>
<li><a role="menuitem" tabindex="-1" href="#">France</a></li>
<li><a role="menuitem" tabindex="-1" href="#">Nederland</a></li>
<li><a role="menuitem" tabindex="-1" href="#">United Kingdom</a></li>
</ul>
</div>
In JavaScript: set the value of the input field on selecting the dropdown.
<select class="form-control" required="required">
<option>A</option>
<option>A</option>
<option>A</option>
</select>
please set required = "required" in your selector