I want to create an icon drop-down box where I can display icons, their names, and then be able to search through them with Bootstrap select.
In my current state, I have solved both problems, but when Bootstrap-select is enabled the icons stop showing.
<div class="col-sm-7">
<div class="select">
<select class="selectpicker" id="iconpicker" data-live-search="true" style="font-family: premium-solid-icons">
<option value="none" selected="" disabled="disabled">Ingen</option>
<option value='psi-3d-glasses'> 3d Glasses</option>
<option value='psi-3d-glasses2'> 3d Glasses2</option>
</select>
</div>
</div>
I am pretty clueless, but it seems like the Bootstrap-select overwrites the style of the select dropbox.
How can I solve the problem?
I was right, the premium-solid-icons was being overridden by Bootstraps Select,so i had to include that font-family setting into the Bootstrap-Select.css file.
.bootstrap-select {
width: 220px \0; /*IE9 and below*/
font-family: premium-solid-icons;
(etc.)
Thank you for taking your time to read, and i hope this will help someone else in the future.
Consider using the Custom Option Renderer from React Virtualized Select
Get it from here:
https://github.com/bvaughn/react-virtualized-select/
Demo: https://bvaughn.github.io/react-virtualized-select/
Related
I have used a select option dropdown which has a default design like below:
<div class="select-wrapper">
<div class="form-group">
<div class="multipleSelection" id="selectQueryTemplateAdd">
<select id="selectQueryTemplate" class="dynamic_Time form-control TaskOverlayDropDown">
<option selected="selected"> Select </option>
<option value="Please confirm the status of the event whether it is resolved. If y....">Please confirm the status of the event whether it is resolved. If ye....</option>
<option value="Narrative mentions that the subj....">Narrative mentions that the subject ...".</option>
</select>
<div class="overSelect"></div>
</div>
</div>
</div>
Is there any way to change its default design like below image:
It should show pointer (hand icon) when we hover on the value
Below background color should be there when we hover.
Want to adjust its height and width
If Dropdown data is long as below, only some part of it should be visible when we open the dropdown list. But full data should be visible as a tooltip when we hover on any value.
You need to use a CSS framework like bootstrap to achieve this kind of styles.
https://getbootstrap.com/
I have a normal Html Select control with following options:
<form action="/target.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars" style="width: 100px; overflow-x: auto;" multiple>
<option value="volvo">Long select option.</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
The first option in the list is a bit longer that the rest. When I select it, I can see the following effect:
However, as I use the horizontal scrollbar to see the rest of the value it appears something as in the image below:
The text on the right are all lost (say both foreground and background are while). Now, I click somewhere outside the Select control, the text appears but half of them selected and rest not.
I tried this with different online html editor and all of them share same behaviour. Is there a way (any css) that I can apply so that once an option is clicked/selected the entire option is selected and not just a portion of it.
The below code is a bit hacky, but it will serve the purpose. You can add the below CSS to make sure the whole item is selected.
option:checked {
width:150px;
}
I would also suggest just increasing the width of the selector for a better user experience, if you do that, you will not encounter the above error.
These questions are similar but not the same or are very outdated:
HTML font weight property on OPTION of HTML SELECT
How to style the option of an html "select" element?
How can I change the font-size of a select option?
The goal is to style different options of the same select menu with different font-weights. We only need to support modern browsers.
This code doesn't work, even though answers on Stack Overflow and elsewhere suggest it should in modern browsers like Chrome.
Here's an example of what it looks like when using the answer from #gravgrif, which shows all the options styled the same:
Another alternative that did not help was bundling each option in an optgroup, and styling the optgroup.
<select class="weightMenu" title="Bold options available">
<option value="200" style="font-weight:200">B</option>
<option value="300" style="font-weight:300">B</option>
</select>
The goal is to use native HTML and CSS. No plug-ins.
Although your code works fine - you should move the styles to the CSS rather than inline styling. Note - i made the font weights greater to show the differences better.
.weightMenu option:nth-child(1) {
font-weight:400;
}
.weightMenu option:nth-child(2) {
font-weight:700;
}
.weightMenu option:nth-child(3) {
font-weight:900;
}
<select class="weightMenu" title="Bold options available">
<option value="200">A</option>
<option value="300">B</option>
<option value="400">C</option>
</select>
Using bigger font weight may solve this issue.
This is because lower values for font-weight looks the same.
<select class="weightMenu" title="Bold options available">
<option value="400" style="font-weight:400">A</option>
<option value="700" style="font-weight:700">B</option>
<option value="800" style="font-weight:800">B</option>
</select>
I have a select element which looks like this:
<div class="input-field container">
<select>
<option selected>Roboto</option>
<option>Kalam</option>
<option>Karma</option>
<option>Montserrat</option>
</select>
</div>
Now, for every one of them, I want to change the font family to what the actual inner html is, to give a preview of the font you're about to select.
But putting styles directly on the option doesn't work for me.
I found a solution targeting all options from css, however, that wouldn't enable me to achieve the wanted behaviour.
Any suggestions?
Thanks!
I tried with CSS, but didn't seem to work.
You can use javascript to set the style same as the option's value with the style attribute:
document.querySelectorAll(".selectFont option").forEach(function(el){
el.style.fontFamily = el.value;
})
<div class="input-field container">
<select class="selectFont">
<option value="monospace" selected>monospace</option>
<option value="Arial" >Arial</option>
<option value="sans-serif" >sans-serif</option>
</select>
</div>
This is quite old, but I had the exact same problem - I also wanted to change the font family for text in materialize select options, but after much css manipulation I could not get it to work.
I finally found this answer by wahmal - if you add the class 'browser-default' to your select element, it will remove the materialize styling. You can then change the font family of the options. (That said, it won't look like a materialize element any longer if you do this.) Example:
<div>
<select class="browser-default" id="font-dropdown">
<option selected style="font-family: 'courier';">courier</option>
<option style="font-family: 'arial;'">arial</option>
<option style="font-family: 'Verdana;'">Verdana</option>
</select>
<label>Font</label>
</div>
I did not need !important to get it to work. Hope this helps someone.
https://materializecss.com/select.html
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.