I am using Select2 for all my dropdown inputs, and applied the minimumResultsForSearch for 10 entries.
The list is of course scrollable, However, it doesn't seem to show any scrollbar (arrows) which may be misleading (some might think the items are just cut off).
I couldn't find any information regarding a scrollbar in the documentation.
Anybody has an idea how to add one?
With the basic of select2 there is no issue with the scroll-bar.
The issue will be somewhere in your CSS codding. You need to provide code to make use able to search for your issue.
Basic Select2 Example (first: no search field and second: search field)
$('#first').select2({
minimumResultsForSearch: 10
});
$('#second').select2({
minimumResultsForSearch: 10
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<div style="padding: 50px;">
<div> 6 options available > No search bar (scroll works)</div>
<select id="first" class="selectdata form-control custom-select" style="width: 60%">
<option value="BE">Belgium</option>
<option value="USA">USA</option>
<option value="NL">Netherlands</option>
<option value="UK">United Kingdom</option>
<option value="GE">Germany</option>
<option value="FR">France</option>
</select>
<div style="padding-top: 25px;"> 11 options available > search bar available(scroll works)</div>
<select id="second" class="selectdata form-control custom-select" style="width: 60%">
<option value="BE">Belgium</option>
<option value="USA">USA</option>
<option value="NL">Netherlands</option>
<option value="UK">United Kingdom</option>
<option value="GE">Germany</option>
<option value="FR">France</option>
<option value="SP">Spain</option>
<option value="IT">Italy</option>
<option value="CH">China</option>
<option value="RU">Rusia</option>
<option value="LUX">Luxembourg</option>
</select>
</div>
Related
I currently have a drop down menu displaying 3 options. Once the user selects an option, another drop down menu will display itself based on the choice from the first menu.
The first dropdown(InDiameter):
<label for="innerdiameter"><i class="fa fa-asterisk text-danger"></i>1. Inner Diameter:(*)
<select id="InDiameter" name="InDiameter">
<option value="N/A">Select</option>
<option value="Standard(1.0-5.0mm)">Standard(1.0-5.0mm)</option>
<option value="Microcuff(0.3-0.75mm)">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs(56-250μm)">Nanocuffs(56-250μm)</option>
</select>
</label>
Second dropdown(Standard):
<label for="standard"> <br>1a. Inner Diameter for Standard:
<select id="Standard" name="Standard">
<option value="N/A">Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</label>
I've tried several js solutions, but none of them have worked. Any help would be appreciated.
in this case you need some one code of javascript and jquery:
the html code:
<label >Select:</label>
<select id="InDiameter" name="InDiameter" required onchange="miFuncion($(this).val());">
<option value="N/A">Select</option>
<option value="Standard">Standard(1.0-5.0mm)</option>
<option value="Microcuff">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs">Nanocuffs(56-250μm)</option>
</select>
<div id="selectStandar" style="display:none;">
<label>Standard:</label>
<select id="Standard" name="Standard">
<option>Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</div>
<div id="selectMicrocuff" style="display:none;">
<label>Microcuff:</label>
<select id="Microcuff" name="Microcuff">
<option value="1">Microcuff 1</option>
<option value="2">Microcuff 2</option>
</select>
</div>
code jquery and Javascript
function miFuncion(value_selected){
if (value_selected=='Standard'){
$("#selectStandar").show();
$("#selectMicrocuff").hide();
}
if (value_selected=='Microcuff'){
$("#selectMicrocuff").show();
$("#selectStandar").hide();
}
}//end function
in this case i validate the first select(InDiameter), take the value and if is a Standard i show the div that have the select with the options Standard..and etc..
is only a method exist differentes methods..
Verify here
I'm looking for a way to implement a custom select field that has a functionality of several select fields (each one has only one selectable entry). I didn't find any way to merge all the select fields into one, either nor way to allow one selection per form category.
Here is what I have
Here is what I am trying to achieve
Example of my current structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page</title>
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.table > tbody > tr > td {
text-align: center;
vertical-align:middle;
}
.col-xs-2 {
padding-top: 10%;
padding-left: 10%;
}
</style>
</head>
<body>
<div class="form-group">
<div class="col-sm-3">
<label for="color" >Color:</label>
<select class="form-control" id="color" >
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="col-sm-3">
<label for="style">Style:</label>
<select class="form-control" id="style" >
<option value="square" >Square</option>
<option value="sphere">Sphere</option>
</select>
</div>
<div class="col-sm-3">
<label for="size" >Size:</label>
<select class="form-control" id="size" >
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</select>
</div>
</div>
</body>
Update: I found a jQuery plugin that does this for you. It is called Bootstrap-select. Check it out here: https://silviomoreto.github.io/bootstrap-select/
This plugin converts a <select> into a Bootstrap Dropdown. One of its features is that you can have a <select multiple>...</select> with <optgroup>(explained below) and you can set the max number of selections per <optgroup> using a data-max-options attribute. So you can just set it to 1 for each <optgroup>. Here is the documentation for that feature: https://silviomoreto.github.io/bootstrap-select/examples/#limit-the-number-of-selections
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<div class="container">
<select class="selectpicker" multiple>
<optgroup label="Color" data-max-options="1">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</optgroup>
<optgroup label="Style" data-max-options="1">
<option value="square" >Square</option>
<option value="sphere">Sphere</option>
</optgroup>
<optgroup label="Size" data-max-options="1">
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</optgroup>
</select>
</div>
Old solution 1:
I think you want to use <optgroup>s to contain multiple groups of <option>s into one <select>. And to make sure you can select more than one option, you need to add the multiple Boolean attribute to your <select>. However, you still need to make it so you can only select a maximum of one <option> per <optgroup>. The answer from this question provides a good piece of javascript code that does that.
Here is a demo that I put together. Hold Control on your keyboard to select multiple options. Notice that if you try to select another option from the same <optgroup>, the previous selection will be de-selected.
$('select optgroup option').click(function() {
$(this).siblings().prop('selected', false);
});
<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.11.1/jquery.min.js"></script>
<div class="container">
<select class="form-control" multiple style="width:200px;height:400px;">
<optgroup label="Color">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</optgroup>
<optgroup label="Style">
<option>Square</option>
<option>Sphere</option>
</optgroup>
<optgroup label="Size">
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</optgroup>
</select>
</div>
Old solution 2
Here is a new solution that I created using Boostrap's Dropdowns. I created this one since the other solution isn't a dropdown so might not be what you are looking for. Let me know if it works for you.
$('.dropdown-menu li a').click(function() {
var groupId = $(this).attr('href');
$(groupId).val($(this).attr('data-sel'));
$(this).closest('.dropdown-menu').find('li a[href="'+groupId+'"]').removeClass('bg-success');
$(this).addClass('bg-success');
});
<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.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-header">Color</li>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Style</li>
<li>Square</li>
<li>Sphere</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Size</li>
<li>Tiny</li>
<li>Smallest</li>
<li>Small</li>
<li>Medium</li>
<li>Big</li>
<li>Biggest</li>
<li>Huge</li>
</ul>
</div>
<div class="form-group">
<div class="col-sm-3">
<label for="color" >Color:</label>
<select class="form-control" id="color" >
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="col-sm-3">
<label for="style">Style:</label>
<select class="form-control" id="style" >
<option value="square" >Square</option>
<option value="sphere">Sphere</option>
</select>
</div>
<div class="col-sm-3">
<label for="size" >Size:</label>
<select class="form-control" id="size" >
<option value="tiny">Tiny</option>
<option value="smallest">Smallest</option>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="big">Big</option>
<option value="biggest">Biggest</option>
<option value="huge">Huge</option>
</select>
</div>
</div>
</div>
I am trying to use a multiple select2 select form in my html with bootstrap. But I'm having issue with sizing, the select2 box is not working with the grid, and it also gurbles the size of next item. The html
<div class="select2-container col-md-11">
<select class="form-control s2" id="complaint" multiple="multiple" name=
"complaint[]">
<option value="bad_breath">
Bad Breath
</option>
<option value="bleeding_gum">
Bleeding Gum
</option>
<option value="swollen_gum">
Swollen Gum
</option>
<option value="gum_pain">
Gum Pain
</option>
<option value="loose_teeth">
Loose Teeth
</option>
<option value="sensitive_teeth">
Sensitive Teeth
</option>
<option value="darkened_teeth">
Darkened Teeth
</option>
<option value="damaged_teeth">
Damaged Teeth
</option>
</select>
</div>
The JS
<script type="text/javascript">
$(".s2").select2({
closeOnSelect: false
});
$(document).ready(function() {});
Full code here http://www.codeply.com/go/Ly1UHW2HT2
First Add in your select box : <select data-width="100%"></select>
Add This JS and CSS in you header :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
to fix the layout (widths not correct) you need to wrap the contents in a form-group:
<div class="form-group">
<label class="col-md-1 control-label" for="select">Label</label>
<div class="select2-container col-md-11">
<select id="select" class="form-control s2" multiple="multiple" name="name[]" data-width="100%">
<option value="o1">Option 1</option>
<option value="o2">Option 2</option>
</select>
</div>
</div>
Re the JS, I think there is an issue with codeply as copying the html and js and referencing the scripts and links directly in codepen works. See here for an example.
I am trying to create a select box that shows all Twitter Bootstrap Icons with its text. Therefore I am using the Bootstrap-Select Plugin. One of the images shows up in the list, but the rest is somehow hidden.
What do I have to change in order to get the list of all listed icons with its text?
JS:
<script src="source/bootstrap_select/bootstrap-select.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.selectpicker').selectpicker('');
});
</script>
HTML:
<select class="selectpicker">
<option data-icon="icon-search">icon-search</option>
<option data-icon="icon-envelope">icon-envelope</option>
<option data-icon="icon-heart" selected="selected">icon-heart</option>
<option data-icon="icon-star">icon-star</option>
<option data-icon="icon-star-empty">icon-star-empty</option>
<option data-icon="icon-user">icon-user</option>
<option data-icon="icon-film">icon-film</option>
<option data-icon="icon-th-large">icon-th-large</option>
<option data-icon="icon-th">icon-th</option>
<option data-icon="icon-th-list">icon-th-list</option>
<option data-icon="icon-ok">icon-ok</option>
<option data-icon="icon-remove">icon-remove</option>
<option data-icon="icon-zoom-in">icon-zoom-in</option>
<option data-icon="icon-zoom-out">icon-zoom-out</option>
<option data-icon="icon-off">icon-off</option>
<option data-icon="icon-signal">icon-signal</option>
<option data-icon="icon-cog">icon-cog</option>
<option data-icon="icon-trash">icon-trash</option>
<option data-icon="icon-home">icon-home</option>
<option data-icon="icon-file">icon-file</option>
<option data-icon="icon-time">icon-time</option>
<option data-icon="icon-road">icon-road</option>
<option data-icon="icon-download-alt">icon-download-alt</option>
<option data-icon="icon-download">icon-download</option>
<option data-icon="icon-upload">icon-upload</option>
<option data-icon="icon-inbox">icon-inbox</option>
<option data-icon="icon-play-circle">icon-play-circle</option>
<option data-icon="icon-repeat">icon-repeat</option>
<option data-icon="icon-refresh">icon-refresh</option>
<option data-icon="icon-list-alt">icon-list-alt</option>
<option data-icon="icon-lock">icon-lock</option>
<option data-icon="icon-flag">icon-flag</option>
<option data-icon="icon-headphones">icon-headphones</option>
<option data-icon="icon-glass">icon-glass</option>
<option data-icon="icon-music">icon-music</option>
</select>
<link href="source/bootstrap_select/bootstrap-select.css" media="screen" rel="stylesheet" type="text/css" />
was missing!
I have been struggling with getting this to work properly. I am trying to get the Horizontally grouped select inputs to work, on my mobile site from this page:
http://jquerymobile.com/demos/1.0/docs/forms/selects/
Right now my select boxes look like this:
But when I view the example it looks like this:
My HTML looks like this:
<fieldset data-role="controlgroup" data-type="horizontal">
<select name="select-choice-month" id="select-choice-month">
<option>M</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="select-choice-day" id="select-choice-day">
<option>D</option>
<?php while($c < 32) {
echo '<option value="'.$c.'">'.$c.'</option>';
$c++;
} ?>
</select>
<select name="select-choice-year" id="select-choice-year">
<option>Y</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</fieldset>
And my include scripts look like this:
<link rel="stylesheet" href="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="//code.jquery.com/jquery-1.6.4.js"></script>
<script src="//code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
I've tried copying and pasting the example exactly, and I still get the vertical and not horizontal, what am I doing wrong here?
Ok. So playing around with it some more and I got the select options working as you want it. These were the changes I had:
<meta name="viewport" content="width=device-width, initial-scale=0.9">
Keep in mind that the initial-scale value will change as per the width of your page and design.
Then I changed the select options as follows:
<div data-role="fieldcontain">
<div data-role="controlgroup" data-type="horizontal">
<select name="select-choice-month" id="select-choice-month" data-mini="true">
<option>Month</option>
<option value="jan">January</option>
<!-- etc. -->
</select>
<select name="select-choice-day" id="select-choice-day" data-mini="true">
<option>Day</option>
<option value="1">1</option>
<!-- etc. -->
</select>
<select name="select-choice-year" id="select-choice-year" data-mini="true">
<option>Year</option>
<option value="2011">2011</option>
<!-- etc. -->
</select>
</div>
</div>
For some strange reason adding the legend tag inside the controlgroup wrapper breaks the design. Don't know if this is a bug or not. If you want a title for the dropdowns then you can do the following:
<div data-role="controlgroup" data-type="horizontal">
<div style="font-weight: bold;">Date of Birth</div>
These changes worked for me on my iPhone4, HTC One, and iPad (there is a whole lot more real estate on the iPad, so it was always going to work. But tested it there anyway).