I want to show flaticons in options but html output doesn't display them.
How to display Icon in select options tag
Above question is solved by using  instead of icon class like that:
<option value="fa fa-address-card"> line chart</option>
If it is possible, how can I solve this problem with the same solution method for flaticons?
flaticon.css contains below style:
.flaticon-tool:before {
content: "\f177";
my html output:
<select class="form-control" name="hekim-extension_ozellikler_icon-select" id="hekim-extension_ozellikler_icon-select">
<option>flaticon-throat</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
If it is possible and easy, also I can use a solution for boootstrap 3.
There is no valid solution to put icons into a select option. My solution is using a jQuery icon picker.
Related
I have a select element and no matter what I try, the option values are blank. The number of options in the drop down is correct, but they are blank. Here is the html:
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="Interactive Brokers, LLC"></option>
<option value="Vanguard"></option>
</select>
I'm assuming some css from another library is overriding the standard select>option css. I've tried commenting out each linked library one at a time but no joy. I've tried adding a .clear-css class to the option like this:
.clear-css {
all:unset;
}
and append it to all options using jquery just before it is used, like this:
$('option').addClass('clear-css');
Still blank.
I've also tried
.clear-css {
all:initial;
}
Still blank.
I also tried adding the clear-css class to the select element, but that causes the whole select element to disappear.
Any suggestions?
You need to include the values for each option between the opening and closing <option> tags. The value doesn't need to match the text content. In fact, it's usually better to remove any special characters and even spaces when working with external APIs, like this:
// This JS is just for the sake of example, to log the new value with each change
const select = document.getElementById('accountBrokerageName');
select.addEventListener('change', () => console.log(select.value));
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="" disabled selected>Choose an option...</option>
<option value="interactive-brokers-llc">Interactive Brokers, LLC</option>
<option value="vanguard">Vanguard</option>
</select>
Select values must be within the actual <option> tags:
<label for="accountBrokerageName">Brokerage:</label>
<select id="accountBrokerageName">
<option value="Interactive Brokers, LLC">Interactive Brokers, LLC</option>
<option value="Vanguard">Vanguard</option>
</select>
I am using a <select> tag on my angular app. I have set it up so you can select more than option. But you can only select options when you Shift+Left Click. I want to be able to select multiple options by only Left Click.
The <select> tag is set up like:
<select multiple>
<option>Option One</option>
<option>Option Two</option>
<option>Option Three</option>
</select>
I saw something like what I wanted to achieve using Material but I cannot use material within the form that I have set up.
Is there a way to achieve multiple select just from a mouse click and now having to press shift?
Not in plain html. But a event listener or onclick handler in plain javascript can do the trick. Very basic and rough just to give you a idea.
<script>
function select(id){
var opt=document.getElementById(id);
opt.selected=!opt.selected ;
}
</script>
<select multiple>
<option id="o1" onclick="select('o1')">Option 1</option>
<option id="o2" onclick="select('o2')">Option 2</option>
<option id="o3" onclick="select('o3')">Option 3</option>
</select>
I don't know if it's a problem or it's normal. I made a multiple select form using bootstrap. The mobile version in console is displaying the informations correctly (screen1), but in a real device I get just 0 items, when I select an items it shows 1 item.... (screen2). Can someone help me to do the same as the first screen ?
Here is a sample that can solve your issue. You need to add the multiple attribute to your <select> element.
Bootstrap form documentations
<select multiple class="form-control" id="selectList">
<option>Your option 1</option>
<option>Your option 2</option>
<option>Your option 3</option>
<option>Your option 4</option>
</select>
I have a select with some options displaying text:
<select *ngIf="cars" class="form-control">
<option *ngFor="let car of cars" value="true">{{car.ID}}</option>
</select>
Is it possible to add an Icon at the beginning of the option? Like [icon]3
UPDATE
I have added the library font-icons to my .angular-cli.son:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome-4.7.0/css/font-awesome.min.css"
and update the code of my select to:
<select *ngIf="cars" class="form-control glyphicon">
<option *ngFor="let car of cars" value="true"> {{car.ID}}</option>
</select>
I use bootstrap 3
It tries to print an icon, but I get an empty square. Any idea?
It seems to me that you are using Bootstrap. So, it is possible to put icon inside option, like this.
<select class="form-control glyphicon">
<option value=""> Icon 1</option>
<option value=""> Icon 2</option>
<option value=""> Icon 3</option>
</select>
Sadly it is not possible using plain HTML <select>. It is possible with wrapper for select. Your own piece of code, that is displayed instead of browser's default select. I recommend you to find some library with ready-to-use wrapper. For example there is select wrapper inside Angular Material (https://material.angular.io/components/select), but you can find standalone wrappers.
Does native HTML have a listbox element? You know how it has a drop box element (called select), does it also have a listbox?
If not, do you know how I could place a list box in my Website.
One method, is to create a table & have each element detect the onclick event. But I dont want to make my own just yet. Are javascript widgets easy to use?
Use a select list:
<select multiple="multiple" size="2">
<option value="Whatever">One</option>
<option value="Other">Two</option>
</select>
#Myles has the select box which is correct, you can also allow multiple select options.
<select multiple="multiple">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>
Add the multiple attribute to a normal <select> and use the size attribute to determine how many rows you want shown. (If you don't set the size attribute, then all options will be visible.):
<select multiple="multiple" size="5">
See example.
I think what you need is the select tag, but set the selects attributes of multiple and size. Here is a reference http://www.w3schools.com/tags/tag_select.asp.
<select multiple='multiple' size='3'>
<option value='o1'>Red</option>
<option value='o2'>Green</option>
<option value='o3'>Blue</option>
</select>
At this moment the standards do not have a listbox element.
There's a web spec in progress about the <selectmenu> element which does have a listbox slot (not element). Possibly this could end up being back in the <select> element
If you want to read more about it:
https://open-ui.org/prototypes/selectmenu
https://css-tricks.com/the-selectmenu-element/