im working on simple form, but I'm get stuck in select options.
Here is my code:
<select title="Pick a number" class="selectpicker">
<option>Select...</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
I wanted width of option list is should be equal to select at any screen size.
How can i achieve this. Thanks!
Since you tagged bootstrap use it like this:
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select title="Pick a number" class="form-control selectpicker" id="exampleFormControlSelect1">
<option>Select...</option>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
Bootstrap ensures that inputs are displayed properly. Have a look here for more informations.
Related
I am using bootstrap 5 and I try to add live search to a form select.
In Bootstrap 3 I can just do it like following:
<select class="selectpicker" data-live-search="true">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
I have tried the same for bootstrap 5 but it does not work.
After some research I have found the datalist, where I can search:
<input class="form-control" list="datalistOptions" placeholder="Type to search...">
<datalist id="datalistOptions">
<option>A</option>
<option>B</option>
<option>C</option>
</datalist>
The live search works but it is not the same.
Is there any way to make it just like in bootstrap 3?
Thank you very much!
I copied a code where it works good in mozilla but, when i go to chrome it doesn't work correctly. I have this in mozilla, where it works like it is an input type where when you type the start letter, the select box will show something like it suggest.
Here is the code :
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" id="labelcheck-up" for="fname">Diagnosis:</label>
<div class="col-sm-2">
<select name="tdiagnosis[]" id="tdiagnosis" class="form-control select2" multiple="multiple" data-placeholder="Please input diagnosis here">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Goat">Goat</option>
</select>
</div>
</div>
</form>
Here is jsfiddle link:
https://jsfiddle.net/DTcHh/40338/
Any suggestions how to make this work in google chrome? Thanks.
I am using bootstrap but not the bootstrap-select plugin. I am stating that because all the answers I have found are for bootstrap-select. I am forced to use bootstrap and I don't realy want to add another plugin on top.
Here is an example of my code.
<div class="form-group">
<label for="active">Year</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar" aria-hidden="true"></i></span>
<select class="form-control input-sm">
<option value="1" selected>April</option>
<option value="2">May</option>
<option value="3">June</option>
<option value="4">July</option>
<option value="5">August</option>
<option value="6">September</option>
<option value="7">October</option>
<option value="8">November</option>
<option value="9">December</option>
<option value="10">January</option>
<option value="11">February</option>
<option value="12">March</option>
</select>
</div>
</div>
My question is how do I limit the height of the select dropdown?
I have tried using css, and everything. I have read many posts on the site which I have tried and nothing seems to work.
I'm writing a really simple form with 2 text fields and one select. For some reason, the select tag with options doesn't display on my page. I can see the 2 text fields and the label for the the select, but not the select it self.
The app is written in rails and I use materialize.
There might be something too obvious that I don't see it, but after 30mn of thinking, I guess it's fair to put it on SO :)
Thanks
Here's the code:
<form action="/resources" method="post">
<input
type="hidden"
name="authenticity_token"
value="<%= form_authenticity_token %>">
<label for="ressource_name">Ressource Name</label>
<input type="text" id="ressource_name" name="resource[ress_name]" value="<%= #resource.ress_name %>">
<label for="ressource_link">Ressource Link</label>
<input type="text" id="ressource_link" name="resource[link]" value="<%= #resource.link %>">
<label for="categories">Categories</label>
<select id="categories" name="resource[category_id]">
<option value="1">Stuff 1</option>
<option value="2">Stuff 2</option>
<option value="3">Stuff 3</option>
<option value="4">Stuff 4</option>
<option value="5">Stuff 5</option>
<option value="6">Stuff 6</option>
<option value="7">Stuff 7</option>
<option value="8">Stuff 8</option>
</select>
<br>
<input type="submit" value="Post">
</form>
So I put the answer (from Samir) here as well as I guess some other people might come across that issue (it won't change your life, but it might save you some minutes that you want to spend on 'real' issues).
Check the styling! For some reason the select tag was defaulted to {display: none;}
The select tags(likely all select tags) on your page are most likely defaulted to styled to 'display : none' and just in case you cannot find the exact css code that is disappearing the select tag, just cascade the old style by declaring a style attribute on the select element and display it to block. like below
<select style="display: block;">
<option value="" selected>Choose Country</option>
</select>
Getting puzzled why Bootstrap class text-uppercase is not working with select options in HTML, whereas apart from select option all classes are working fine.
Here is a working demo for text-uppercase :
http://plnkr.co/edit/DR8jPACODGzvW8W0ZX2u?p=preview
<select class="form-control">
<option>One</option>
<option><span class="text-uppercase">two</span></option> //class="text-uppercase" not working
<option class="text-uppercase"> three</option> //same here
</select>
Am i doing something wrong ?
The class="text-uppercase" needs to be used with the option tag.
<select class="form-control">
<option>One</option>
<option class="text-uppercase"><span>two</span></option>
<option class="text-uppercase"> three</option> //same here
</select>
You had been using class="text-uppercase" with <span> not <option>
yes exactly as said by #debin in comment. class text-uppercase is get overwritten by the default behaviour of bootstrap style i.e
button, select { text-transform: none;}
you can check it here...
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css
so to apply the class like text-uppercase text-capetalize etc we have to add extra class in the css file or something like that i.e inline enternal or external style.
so exact answer is like this:
<select class="form-control customClass">
<option>One</option>
<option>two</option>
<option> three</option>
</select>
use .customClass in your css and use style text-transform: uppercase;
second method as suggested by #SaucedApples
<select class="form-control">
<option>One</option>
<option class="text-uppercase"><span>two</span></option>
<option class="text-uppercase"> three</option> //same here
</select>
this will add indvidualy class to option tag.
posting it as answer may it help someone Else :)