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.
Related
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'm replacing a winforms screen with an html interface, which needs to run in IE7/8/9 & Firefox.
Currently on one of our screens we have a funky input control that looks like this:
The user can enter a value in one of three ways:
the user can just type into the box
the user can select an item from the dropdown
the user can tick the ‘Unopened’ checkbox, which effectively chooses a known item we call ‘Unopened’
There’s also a search button ‘…’ but that’s another control which is easy to implement.
I want to rebuild this using html and am wondering how to replace the Unopened function, as (a) and (b) are easy enough. I’m thinking I’ll just put a separate Unopened checkbox beneath the INPUT box instead of inside it, because that would be simpler. But if there's a way to keep it looking like it does now I’d probably prefer that. Is that possible?
UPDATE:
Secondary question: if I do put the checkbox inside the INPUT box using CSS am I just bringing upon myself a lot of pain with quirky little usability or layout problems or is this something that's not too unusual or hard to do?
You can put it in a separate div and then position it with CSS to look like it's inside of the input field:
#checkbox {
position: relative;
top: -10px;
}
or whatever values you need...
Regarding your second question: Nope. It's not actually "inside" the box, it just appears that way. All the functionality will still be there. =)
http://jsfiddle.net/BdBTy/ is a quick example of how this works.
place the check right below the textbox in html
in css for the checkbox put
margin-top:-25px;
(or whatever exact number you need)
Is there a a way to hide the arrow in a standard dropdown select fieldset?
Fiddle link
I have an autocomplete system where you fill in the organisation number of a company and it finds the info based on a database. I'd like to have the select box, but without the arrow..
I need it to do this as it's a double function form, either you can fill in your ORG nr or just manually type it in, pretty simple, probably used all over the internet.
Thanks :)
Kyle,
Usually autocomplete systems use input text elements instead of a select element. This creates what you are trying to achieve. Google is a classic example of this.
If you want, you can take a look at jQuery's autocomplete plugin to get another example and some code ideas, or whatever. http://docs.jquery.com/Plugins/Autocomplete
It's not easy, but you can fake it by putting a button above a Select that has its size property set to a value greater than 0.
Have the Select hidden and positioned absolutely under the button. Clicking the button shows the list. Selecting the list changes the text on the button and re-hides the Select.
This way you need a text box, because you cannot type anything in <select> tag.
And put an onclick event to this box to open autocomplete with all possible values.
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 have a bunch of elements (divs) and they represent items. I can delete them by clicking a link and its done through ajax. I had the divs store the value in id however it appears that even though it does work the standard says id names must start with a letter. So i could start it with a letter and remove it when i use ajax or i can store the value another way.
What are ways i can store values in html? I don't think inputs are legal outside of forms but i am rethinking what are good ways to store values.
Best way is to use the new HTML 5 spec to store data in the data-[name] in the div elements
ie
<div data-yourfield="value">
Text
</div>
Then using jQuery find the divs with the selector (reference http://api.jquery.com/category/selectors/)
div[data-yourField=""]
You can store it as text inside the div if you like. You also can use inputs, just add the form tag around everything. Just because it's a form doesn't mean it has to "submit". Inputs or textboxes would probably be the best way to store them actually.