How to put a title in a drop down list? - html

The dropdownlist is white/empty. I would like to put a title for example Choose.
illustration
I tried adding <optgroup label="Choose">/ </optgroup> but I want the title to be in the input before that the user clicks on the dropdown.
How to do this?
<select [(ngModel)]="type" name="type" class="form-select" style="width: 10%">
<optgroup label="Choose ">
<option value="Y">Yes</option>
<option value="N">No</option>
</optgroup>
</select>
Here is a reproduction on Stackblitz.
Thanks

Use this -
<select [(ngModel)]="type" name="type" class="form-select" style="width: 10%" placeholder="Choose">
<option disabled selected>Choose</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>
This answer is copied partially from this answer answered by gam6itko

<select [(ngModel)]="type" name="type" class="form-select" style="width: 10%" placeholder="Select a value">
<option selected disabled value="">Select a value</option>
<option value="Y">Yes</option>
<option value="N">No</option>
</select>

Related

How to set size of Materialize select element?

Regarding the Materialize select element, I would expect the number of options visible to be 5, yet this is not the case.
I have also tried to set the height but no luck either.
<div class="input-field col s4">
<select id="add_cusine_type" size="5">
<option value="" disabled selected>Choose your cuisine type</option>
<option value="Australian">Australian</option>
<option value="American">American</option>
<option value="British">British</option>
<option value="Carribean">Carribean</option>
<option value="Chinese">Chinese</option>
<option value="French">French</option>
<option value="Greek">Greek</option>
<option value="Indian">Indian</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Mediterranean">Mediterranean</option>
<option value="Mexican">Mexican</option>
<option value="Moroccan">Moroccan</option>
<option value="Spanish">Spanish</option>
<option value="Thai">Thai</option>
<option value="Turkish">Turkish</option>
<option value="Vietnamese">Vietnamese</option>
</select>
<label>Cuisine Type</label>
</div>
Thank you
Materialize uses a dropdown for the select options (it is in fact a dropdown triggered by a text input). So you need to target the dropdown class:
.select-dropdown {
height: 300px;
}
https://codepen.io/doughballs/pen/NWWGNMq
You can simply specify it in the wrapping div here my example is 300px
https://codepen.io/mxnelles/pen/GRJeXGd
<div class="input-field col s4" style="width:300px">
<select id="add_cusine_type" size="5">
<option value="" disabled selected>Choose your cuisine type</option>
<option value="Australian">Australian</option>
<option value="American">American</option>
<option value="British">British</option>
<option value="Carribean">Carribean</option>
<option value="Chinese">Chinese</option>
<option value="French">French</option>
<option value="Greek">Greek</option>
<option value="Indian">Indian</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Mediterranean">Mediterranean</option>
<option value="Mexican">Mexican</option>
<option value="Moroccan">Moroccan</option>
<option value="Spanish">Spanish</option>
<option value="Thai">Thai</option>
<option value="Turkish">Turkish</option>
<option value="Vietnamese">Vietnamese</option>
</select>
<label>Cuisine Type</label>
</div>

How to keep whitespaces in the begining of select options?

I need to keep whitespaces in the begining of select options so I'm adding styles: style="white-space: pre, and rendered form is as below:
<select id="doc_category" name="doc[category]" class="form-control select2 form-control">
<option value="32" style="white-space: pre">G1</option>
<option value="33" style="white-space: pre"> p1</option>
<option value="34" style="white-space: pre"> p333</option>
<option value="35" style="white-space: pre">G2</option>
<option value="36" style="white-space: pre"> p3</option>
<option value="37" style="white-space: pre">GłãWNA3</option>
<option value="38" style="white-space: pre"> pod5</option>
</select>
and whitespaces are gone.
Adding instead of <pre> works for me:
<select id="doc_category" name="doc[category]" class="form-control select2 form-control">
<option value="32">G1</option>
<option value="33"> p1</option>
<option value="34"> p333</option>
<option value="35">G2</option>
<option value="36"> p3</option>
<option value="37">GłãWNA3</option>
<option value="38"> pod5</option>
</select>
Preview
place at the beginning OR (which is better since there is no real white-space present then) use padding-left:1em;
You should use option groups for that.
A nice simple example from W3Schools
<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>

bootstrap select elements with fixed width do not display inline

I have the following list (where ... represents more):
<div class="form-group">
<label class="control-label col-sm-2" for="event_End Time">End time</label>
<div class="col-sm-10">
<select class="form-control" id="event_endtime_1i" name="event[endtime(1i)]" required="required" style="width: 20px">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
...
</select>
<select class="form-control" id="event_endtime_2i" name="event[endtime(2i)]" required="required" style="width: 20px">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
...
</select>
<select class="form-control" id="event_endtime_3i" name="event[endtime(3i)]" required="required" style="width: 20px">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
...
</select>
— <select class="form-control" id="event_endtime_4i" name="event[endtime(4i)]" required="required" style="width: 20px">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
...
</select>
: <select class="form-control" id="event_endtime_5i" name="event[endtime(5i)]" required="required" style="width: 20px">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
...
</select>
</div>
</div>
I want the nice styling that the form-control css declaration offers, but the problem is that it appears to display the select element as a block and not inline, because the result looks like this:
The select elements are supposed to be sitting next to each other but they are not even though I specified a really really small width, just to prove my point:
http://www.bootply.com/rmtvHeYqFa
What is the correct way to display form-control declarations inline in bootstrap, so my select elements sit next to each other nicely?
Simple fix: You can override the .form-control class to use display: inline
.form-control { display: inline; }
Here's a bootply showing the change
I will add though that this will override ALL your .form-control classes in your project, so, you might instead want to give the elements you want inline another class, and give that class the property display: inline instead - you might need to add !important to override bootstrap in this case e.g.
.new__class { display: inline !important; }
But avoid using !important if you can

Required attribute not validating on a select element

For some reason, the required attribute didn't work. Where did I go wrong?
I've already tried putting another <option> with blank value
<form action="">
<select required>
<optgroup label="test">
<option value="">choose</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option>
</optgroup>
</select>
<input type="submit">
</form>
It works without optgroup DEMO
<form method="POST" action="">
<select required>
<option value="">choose</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option>
</select>
<input type="submit">
</form>
Anyway, there is poor support of the required attribute in browsers

Customize select into a simple icon

I have a simple select statement:
<select class="select ui-icon ui-icon-chevron-down" style="width: 10px;height: 19px;" type="position_last">
<option value="" style="display: none"></option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
I don't want it to show as a normal select, I want to show it as a simple icon.
I'm not that good with CSS, so I don't know if that can be done or not.
How about using additional library
http://silviomoreto.github.io/bootstrap-select/
you just need to include the library and add this code to your javascript
$(".select").selectpicker();
I just found out how.
I just have to make its backround transparent
<select class="select_ticket form-control ui-icon icon-list" style="background-color: transparent; border: medium none;">
<option value="" style="display: none"></option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>