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/
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 very simple <select> dropdown with two child <option>'s:
<div>
<select>
<option
value="defaultPrice"
selected
>Price</option>
<option
value="title"
>Title</option>
</select>
</div>
When I use my mouse and click the select, I am shown the options context menu to select an option:
However, when I use my keyboard and focus the select element, the up and down keys will not bring up the same dialogue, as expected.
However when I add a label to my select, the up and down keys do show the context menu:
<div>
<label for="my-select">Sort order</label>
<select id="my-select">
<option
value="defaultPrice"
selected
>Price</option>
<option
value="title"
>Title</option>
</select>
</div>
Then, if I then add CSS to hide the label, again the dropdown will not show.
This seems to be happening wherever I've been using select drop-downs, and only seems to be an issue in Chrome (v. 77.0.3865.90).
I have no CSS included in the site yet, so it's not a styling issue.
Has anyone else encountered such an issue? Unsure if it's a problem with my markup or a bug with Chrome.
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 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/
Right now the search_type which JS uses later is always "people" as can be seen in the hidden input field.
How can I make it so that the selected option's value is the value tied to the name "search_type"?
<input type="hidden" name="search_type" value="people"> <!-- This obviously needs to change-->
<div class="medium-4 columns">
<select>
<option value="default">All Categories</option>
<option value="people">People</option>
<option value="items">Items</option>
</select>
</div>
I have tried changing the name of all the options' names to search_type but this did not work. I have also tried other things, but can't figure it out. Any help would be much appreciated.
Here is the Javascript line that calls it:
search_type: $('input[name="search_type"]').val(),
Note: I am working in Zurb Foundation
Simply put, there is no need to add another input field when you already have a perfectly usable one! change your code so that the <select> includes the name attribute, like so, and get rid of the hidden input:
<div class="medium-4 columns">
<select name="search_type">
<option value="default">All Categories</option>
<option value="people">People</option>
<option value="items">Items</option>
</select>
</div>