I have created an input that shows a glyphicon and some text (text is not shown in pictures cause it is not relevant).
<select class="form-control glyphicon" required>
<option value="empty"></option>
<option *ngFor="let car of cars" value="true"> {{car.name}}</option>
</select>
This code partially works. It shows correctly what I what to show after selecting the option, but it does not while I visualize the proper option. I attach a photo to explain it better:
I would like to know if it is possible to show the icon also during the selection of it.
Related
Currently trying to style a responsive form using bootstrap. This form actually didn't have any responsive design applied within a separate css file before applying bootstrap, everything was purely type and effects.
But I'm having a lot of issues with a select element within this form.
For whatever reason, a select element, which comes before a series of paired radio buttons (themselves grouped within fieldsets), is cutting off both the legend element and the label element for the first radio input. It looks like this:
select element viewed w/ element picker
It looks like content-box is taking up a ton of space. Or that space is "saved" for an active select dropdown? I'm not sure why there's so much blue there ^_^ I'm probably missing something very simple.
I've sectioned the select element off (using semantic section), I've wrapped it within its own row, I've tried applying some small-but-noticeable amount of extra margin-bottom (mb-4 for example).
None of this has worked. Here's my code for this particular section:
<section class="col-8 col-md-4" id="recommend">
<label class="col-form-label" for="select">Would you recommend your stay at the Aperture
Science computer-aided Enrichment Center?</label>
<select class="form-control mb-5" name="select" id="select" required>
<option value="">-- Please select an option --</option>
<option value="yes">Yes</option>
<option value="absolutely">Absolutely</option>
<option value="of_course">Of course!</option>
</section>
Any ideas? :D
You should probably end your <select> element, as this could have unknown effects on the rest of the DOM.
<select class="form-control mb-5" name="select" id="select" required>
<option value="">-- Please select an option --</option>
<option value="yes">Yes</option>
<option value="absolutely">Absolutely</option>
<option value="of_course">Of course!</option>
</select> <!-- <- this was missing -->
I have a dropdown in an Angular 2 project:
<div class="form-group">
<label for="vendors">Vendors</label>
<select class="form-control" id="vendor_id" name="vendor_id" [(ngModel)]="selectedVendor" (ngModelChange)="onVendorChange($event)" required>
<option *ngFor=" let vendor of vendors " [ngValue]="vendor"> {{vendor.business_name}} </option>
</select>
</div>
This works fine in Chrome, but when I open it in Safari, when the page is loaded it shows the first item as selected even if I didn't selected anything. However, if I click "Submit" it will show "This field is mandatory".
In Safari it shows the first item as selected, but actually it's not selected. How to fix this?
In fact, you may find that the accepted answer is insufficient. At least using Angular 5 and Safari, I have found that you must explicitly make the option undefined. In other words:
<option disabled selected value=undefined> --Select-- </option>
Otherwise, the option will simply be marked as disabled and Safari will continue to show that it has the first real option selected, when in fact it isn't (and can't be).
This is not an angular issue, this is the default behavior on safari/mobile safari. An easy solution/workaround is shown below.
If you add another option box such as:
<option disabled selected value> --Select-- </option>
Then your code becomes:
<div class="form-group">
<label for="vendors">Vendors</label>
<select class="form-control" id="vendor_id" name="vendor_id" [(ngModel)]="selectedVendor" (ngModelChange)="onVendorChange($event)" required>
<option disabled selected value> --Select-- </option>
<option *ngFor=" let vendor of vendors " [ngValue]="vendor"> {{vendor.business_name}} </option>
</select>
</div>
This way you cannot re-select the first "Select" box after the user has made a valid selection, answer taken from this answer.
If a item is selected it is not possible to see the full list by cliking the arrow as shown in the diagram.
<div>
<input type="text" id="client" list="allclients" placeholder="Start typing..." value="" />
<datalist id="allclients">
<select>
<option value="Jack">Jack</option>
<option value="John">John</option>
</select>
</datalist>
</div>
If the user select one he cannot see the full list unless input is cleared again. Is there a way to get rid of this limitaion.
This is the expected behavior and what I asked is not possible. The list supposed to get filter by the user input text.
Possible solutions for this issue can be solved using one of these
http://pebbleroad.github.io/combo-select/
http://jqueryui.com/autocomplete/#combobox
I am using a SELECT2 Input box. I need help trying to change the color (to white) of the "X" that would remove the tag from the field. I have included a fiddle with some sample code.
The below is just some sample code. I am using an input box with angular utilizing ui-select2 functionality. I figure is someone can figure out below, I can at least translate it to what I need. Thanks!
<select multiple id="e1" style="width:300px">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<input type="checkbox" id="checkbox" >Select All
Some Script:
$("#e1").select2();
http://jsfiddle.net/jimfromthegym/jEADR/1112/
It appears that the "X" is actually an image: select2.png
If you check your browser web tools network tab you can see this external resource loaded.
I'm assuming it is part of the select2 plugin you are using. If you can find this image in the source of the plugin and change the color manually using an image editor that would be your quick fix/change.
I am writing an select drop down in html which has
<option><input type="text"></option>
But when I am running that program the textbox is coming out of the dropdown,the purpose of inserting text box in select is that , If a user is unable to find its desired option . He will be able to add a new one.
This is the select code. You can see alive demo running this code http://jsfiddle.net/_nikhilagrawal/eJ7k6/3/. Why this input type text is coming outside the select. Please have a look.
<select name="color">
<option>pick a color</option>
<option value="red">RED</option>
<option value="blue">BLUE</option>
<option><input type="text" name="color" /></option>
</select>
This is the output of the drop down.
<option> elements cannot have anything other than text inside them.
If you want a widget that combines text inputs with a dropdown menu then you will have to build it using JavaScript.
You can not write
<input type="text" name="color" />
inside <option></option> tag.
You should add textbox nearest to selectbox If a user is unable to find its desired option,user can add new one. or you need to customize your select box using css+jquery