I have a tree of data organized like so (but with many many more options) in a dropdown list:
pizza
pizza.mediterranean
pizza.veggie
pizza.meatlover
drinks
drinks.soda
drinks.soda.pepsi
drinks.soda.coke
drinks.beer
drinks.water
I want the larger categories (pizza,drinks) to show up as optgroups but I want to be able to select an optgroup as an option in the drop down list. What I have read multiple places is that optgroups are only for grouping and can not be selected.
Since I also want more than one level of indentation to allow the dropdown to look as close to the above example as possible -- perhaps optgroups aren't the way to go but rather a css solution. In firefox I can do what I want by adding styles to the options and making them bold and/or have a left padding but it seems like in webkit the only attibute I can change on options in a dropdown is their color.
Does anyone know how I can achieve this effect in webkit (chrome/safari) and firefox --- (I don't really care about IE at the moment) using optgroups, css, or anything else?
You may just want to go low-tech:
<select>
<option>Root</option>
<option> Second level</option>
<option> Third level</option>
</select>
You are hitting the limits of what you can do with a real select. Conceptually, these select widgets are drawn by the OS (although some browsers - firefox - have their own implementations), so the styling options are limited.
There are many nice select replacements. The one I'm most familiar with is jqueryui's autocomplete. It is fast and flexible and you can style the options however you like. One can imagine other home-grown solutions using jquery or another toolkit - or plain 'ol javascript.
Using a set of radio buttons (or checkboxes, if several choices are to be allowed) instead of a select element, you can organize and style them like any other content, e.g. with indentation and bolding. It won’t act as a dropdown menu, though, but this can actually be a usability and accessibility improvement.
Related
What's the semantic difference between using a <select> element containing <option> children and, using an <input type="radio"> elements within a <fieldset> parent? Both methods offer the user to select at most one option. The only differences are visual and user-experience-related: the first method shows the user a drop-down menu while the other option shows radio buttons.
Equivalently, what's the difference between <select multiple=""> with <option> children (a select-multiple drop-down) and using <input type="checkbox"> (check boxes)? Again, I don't see any difference in function; only presentation.
I'm just wondering why the HTML spec has both methods for developers to use. If the only difference is in the presentation and in the user experience, shouldn't we only be using one method?
In general terminology there is no such particular difference between Radio Button and a Select List(Dropdown) but, since the screen space used is proportional to the number of options, if the number of options are between two to seven a web designer goes for using radio buttons, for eight or more options, he/she uses a drop-down list or single-selection list.
Another thing to keep in mind while designing is: If the default option is recommended for most users in most situations, radio buttons might draw more attention to the options than necessary.
Consider using a drop-down list if you don't want to draw attention to the options, or you don't want to encourage users to make changes. A drop-down list focuses on the current selection, whereas radio buttons emphasize all options equally.
The same follows for the checkbox and multiselect dropdown.
I'm talking about your standard:
<select>
<option>blah blah</option>
<option>blah bl</option>
</select>
my problem is, for the dataset I must include in this dropdown, I've got a few outliers:
That's a distribution graph of the total occurrences (y-axis) of all character counts (x-axis) for the strings in the dropdown.
The average is only ~18.5 characters, but accommodating the 101 char string forces me to use a really small font.
Is there a way to wrap text inside a <option></option> ? I tried just dropping a <br /> inside the middle of the string and that didn't validate.
In general, native <select> and <option> form controls offer very little control over how they can be styled, especially if cross-browser compatibility is a concern. If you want to be able to control things much better, your best bet is to have everything in a normal <select> box (for accessibility) and then to override it with a fake select box using JavaScript. I've had to do this in the past and the jQuery UI library worked well for me.
In your case, one possible UI that might would (if you go the JavaScript replace route) would be to use an ellipsis on the long elements, but then show their full text on mouseover and focus (it's early, so these might not be the correct events, but you get the idea).
Once you have JavaScript controlling a fake select box, there's really no end to what you can do for the UI behavior, but ultimately, if you need control, native form controls usually don't cut it.
I need a html 'control' similar to "CheckedListBox" from WinForms:
<select> <optgroup> <option>Item 1</option></optgroup></select>
where each item (and group) has a check box which can be individually checked/unchecked with callbacks.
Has anyone found a jquery-ui or other option for accomplishing this?
Thanks!
I don't believe you can do that with a standard select box, but if you make it into a custom select box and then add in your input checkboxes to the items, you could probably achieve what you desire. Do some searches for a jquery custom select box to find what suits you. Here a just a couple I found (untested, and thus not necessarily recommending...)
http://www.mypocket-technologies.com/jquery/SelectBoxPlugin/
http://dervish.wsisiz.edu.pl/~suszynsk/jQuery/demos/jquery-selectbox/
alt text http://www.freeimagehosting.net/image.php?a55fa98f01.jpgHi I am trying to use a HTML select box with 'multiple' select options and size to 1 as below
`
<SELECT NAME="toppings" MULTIPLE SIZE=5>
<OPTION VALUE="mushrooms">mushrooms
<OPTION VALUE="greenpeppers">green peppers
</SELECT>
When the size is set to 1 small scrollbar appears which makes the page clumsy.If I increase the size its eating up my page since there are around 20 such multiple boxes in and around the page. I am looking for a solution which looks like <SELECT> but should function as multiple
Is this possible. I remember seen something similar but don't remember exactly.
Any ideas
I had uploaded the imageSample http://www.freeimagehosting.net/image.php?a55fa98f01.jpg
Check out this code... it turns your multi-row select into a dropdown with checkboxes using jQuery.
code.google.com/p/dropdown-check-list
I'm going to go in bit of a different direction with this one:
You really, really need to rethink your design if you need to do what you are doing here. You might also want to pick up a book on HTML; and interface design in general.
When things look a certain way, that gives people certain expectations: A single-select should always look like a single-select, and a multiple-select should never look like a single-select.
You can't get a multiple select to display as a regular select. If you could, how would you expect the user to select multiple values ?
That being said, the solution would be to create your own custom solution or use one of the jquery plugin out there.
You can't hide the scroll bar in a multi-select... otherwise it would look like a text-area and may confuse a user. If you really want to hide it, make a div and float it over the area of the scrollbar to simulate hiding it. I don't recommend it but its a possibility.
I would like to know if there is anyway I can divide an item on two line inside a select box.
One of the values of my select box is two long to fit in my div.
No, this is impossible.
You can consider using a javascript widget, like this jQuery plug-in.
May I also say that what you are trying to do is uncommon - even in desktop applications users don't expect to find wrapped text in a drop-down box and may get confused if they do see one. It would be better to try a different control or try to limit the text.
It is impossible, but if it's simply a matter of avoiding that the element gets too wide you could just define a width (eg. <select style="width:100px;">). This will cause text to be cut off when the box is "closed", but as soon as you "open" it the entire text will be shown.
As far as I know, it's impossible. However, I'd look at jQuery for options. Specifically, there are jQuery plugins that allow for select box customization.
Select Box Factory 2.0 is one option. I believe it extends the functionality of the select box to allow text wrapping among other features.
You could simple add an option disabled in blank
<option disabled selected value> </option>
Divide an item that's on two lines in a select box.
Why would you want to do that? If you're using a JQuery plugin to make HTML display inside an option tag, then there would be no reason to ask this question, I don't think, as you would be already able to add a tag.
What you can do to make spacing in select elements, is to create a blank option tag, that has an empty value and name. You would then have to validate the submission to detect if a blank value was submitted.
If you are really in need, a hacky solution would be to take a screenshot of the text on two lines, and use images in your select box.
http://www.jquerybyexample.net/2012/05/how-to-add-images-in-dropdown-list.html
Just be sure to set the alt tag on the images for accessibility.