Here is an example of what is happening, when the dropdown list in the menu is clicked the menu is dismissed. Thanks in advance
#menu{
margin: 0 auto;
}
<link href="https://code.getmdl.io/1.3.0/material.light_blue-blue.min.css" rel="stylesheet"/>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<nav class="mdl-navigation">
<button id="menu" class="mdl-button mdl-js-button mdl-button--icon" style="background-color:blue">
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="menu" id="ul_container">
<p>DropDownList</p>
<li>
<select name="Select">
<option value="0">Option_0</option>
<option value="1">Option_1</option>
<option value="2">Option_2</option>
<option value="3">Option_3</option>
<option value="4">Option_4</option>
<option value="5">Option_5</option>
</select>
</li>
</ul>
</nav>
document.querySelector('.mdl-menu').addEventListener('click', function(event) {
event.stopPropagation();
});
document.querySelector('.mdl-menu').addEventListener('click', function(event) {
event.stopPropagation();
});
#menu{
margin: 0 auto;
}
<link href="https://code.getmdl.io/1.3.0/material.light_blue-blue.min.css" rel="stylesheet"/>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<nav class="mdl-navigation">
<button id="menu" class="mdl-button mdl-js-button mdl-button--icon" style="background-color:blue">
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="menu" id="ul_container">
<p>DropDownList</p>
<li>
<select name="Select">
<option value="0">Option_0</option>
<option value="1">Option_1</option>
<option value="2">Option_2</option>
<option value="3">Option_3</option>
<option value="4">Option_4</option>
<option value="5">Option_5</option>
</select>
</li>
</ul>
</nav>
Related
The application I develop needs a submenu in the option tag. If a user clicks on one of the options from the submenu, it shows up in the search bar to be searched. However, I am not being able to do so.
This is the code:
<div class="form-row">
<select class="form-control mx-sm-3"">
<option selected="selected">Variant</option>
<option>Protein Variant</option>
<option>Copy Number Alterations</option>
<ul class="nav navbar-nav">
<li class="dropdown">
<option href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></option>
<ul class="dropdown-menu">
<option>Service A</option>
<option>Service B</option>
<option>Service C</option>
</ul>
</li>
</ul>
</select>
</div>
Ideally, if the user hovers over 'service' there should be a new box with options 'Service A', 'Service B', 'Service C'
HTML way only offer optgroup
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
if you want a more specific dropdown, you need to implement it with javascript, like:
$(document).ready(function() {
$('.dropdown-submenu a').on("click", function(e) {
$(this).parents('ul').find('.dropdown-submenu ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
All South Africa
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Variant</a>
<a class="dropdown-item" href="#">Protein Variant</a>
<a class="dropdown-item" href="#">Copy Number Alterations</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Service A</a></li>
<li><a class="dropdown-item" href="#">Service B</a></li>
<li><a class="dropdown-item" href="#">Service C</a></li>
</ul>
</li>
</ul>
</div>
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.
I'm looking for websites to use as an example that use categorized options within a drop down.
These may look like:
Fruit
Apple
Pear
Peach
Melon
Vegetables
Asparagus
Beetroot
Broccoli
Herbs
Basil
Dill
Ginger
The headings wouldn't be clickable, only the child options would be.
I'm sure I have seen websites do this before, but I'm struggling to find a good example.
Does anyone know of any websites that have adopted this method?
This is a simple dropdown with categorization.
<select>
<optgroup label="Fruit">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
<option value="peach">Peach</option>
<option value="melon">Melon</option>
</optgroup>
<optgroup label="Vegetables">
<option value="asparagus">Asparagus</option>
<option value="beetroot">Beetroot</option>
<option value="broccoli">Broccoli</option>
</optgroup>
<optgroup label="Herbs">
<option value="basil">Basil</option>
<option value="dill">Dill</option>
<option value="ginger">Ginger</option>
</optgroup>
</select>
Use bootstrap's navbar with dropdown to reach this job:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
in the snippet you only will see the "smartphone version" due to width of snipet window, copy the code and test it by yourself in a full page.
Parent elements are clickable only to drop down child elements, and child elements are clickable to go somewhere.
you can do this as pure HTML and even through jQuery.
For HTML bellow is the snippet
<select>
<optgroup label="Fruit">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
<option value="peach">Peach</option>
<option value="melon">Melon</option>
</optgroup>
<optgroup label="Vegetables">
<option value="asparagus">Asparagus</option>
<option value="beetroot">Beetroot</option>
<option value="broccoli">Broccoli</option>
</optgroup>
<optgroup label="Herbs">
<option value="basil">Basil</option>
<option value="dill">Dill</option>
<option value="ginger">Ginger</option>
</optgroup>
</select>
and for jQuery bellow is snippet
<div class="dropdown">
<a id="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu" style="display:none;">
<h3>Fruit</h3>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Peach</li>
<li>Melon</li>
</ul>
<h3>Vegetables</h3>
<ul>
<li>Asparagus</li>
<li>Beetroot</li>
<li>Broccoli</li>
</ul>
<h3>Herbs</h3>
<ul>
<li>Basil</li>
<li>Dill</li>
<li>Ginger</li>
</ul>
</div>
</div>
and here is it jQuery
<script>
$('#dropdown').click(function(event) {
$('.dropdown-menu').slideToggle();
});
</script>
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>
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