I've been trying to find a solution and example for this problem for a while now.
We have a combobox with a lot of options, ranging from 1 up to atleast 100.
Our customers don't always use proper resolutions so for some the options will scroll out of the screen.
What we want is to have the normal HTML combobox but when you click it show a "box" which shows only 10 options with a scrollbar to scroll to the other 90 options
Example:
This example is (probably) made in winforms but I want to have this as a html/javascript(jquery). At which point the options will not be visible unless you click the control (As a normal combobox would work)
Attempts
I have already:
- tried putting the combobox in divs and giving it a size. But that will make it loose the popup function and we want to keep that.
tried every other post in stackoverflow that concerned combobox's (dropdownbox) with vertical scrollbars
added "size='5'" but this would just make it a listbox instead of a combobox
added "multiple='yes'" but this doesn't do anything usefull for my cause
You can try this..
<select name="select1" onmousedown="if(this.options.length>8){this.size=8;}" onchange='this.size=0;' onblur="this.size=0;">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
</select>
I'm not really sure if I'm getting it, but is this what you are looking for: you could just set the size of the select item which is generated.
Add this line of style in your component: style="height: 200px; width: 300px;".
.
.
.
Related
I have a problem with multiselect box on iPhone Safari. When I open the multiselect box it automatically selects the first option. Here is the code snippet that i am using:
<select multiple>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
I have added a blank option with the disabled attribute (see below from here) as the first option but it didn't work in iPhone Safari. I am using an iPhone 6s+:
<option disabled></option>
disable=disable
just add it in option so that no one will be able to access that option
<option selected=selected value="test0">Pick an option</option>
Use the attribute selected to specify that this option should be the one selected. Or put the first one you want to see selected by default at the top of your list.
disabled attribute will, well i know how unprobable it sounds, disable your select option, thus means it will not be able to be selected.
If found a really annoying bug on the current (iOS 9.2) mobile safari (first appearing since iOS 7!)
If you using multi select fields on mobile safari - like this:
<select multiple>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
You will have problems with automatically selection!
iOS is automatically selecting the first option after you opened the select (without any user interaction) - but it will not show it to you with the blue select "check".
So if you now select the second option, the select will tell you that two options are selected (but only highlighting one as selected)...
If you now close and open the select again, iOS will automatically deselect the first value - if you repeat, it will be selected again without any user interaction.
Thats a really annoying system bug, which is breaking the user experience!
Solution for safari multi select bug and Empty and Disabled option tick related issue:
<select multiple>
<optgroup disabled hidden></optgroup>
<option value="0">All</option>
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
</select>
Add a disabled and hidden optgroup before the real options.
After a long research I found the following (not most beautiful) but working solution:
The trick is to add a empty and disabled select option at the fist position:
<select multiple>
<option disabled></option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
This will prevent iOS from automatically selecting the first option and keep the selection values right and clean!
The empty option is not visible and the count of the selections is correct.
I have the following drop down list:
<select>
<option value="+1">+1</option>
<option value="+93">Afghanistan (+93)</option>
<option value="+355">Albania (+355)</option>
<option value="+213">Algeria (+213)</option>
<option value="+1">American Samoa (+1)</option>
...
</select>
However, space is limited to me; I can't display the entire name of the country. I want to display what's relevant to the user once selected. So I opted to display only the country code by rearranging the option's text and the country to the following:
<select style="width: 60px;">
<option value="+1">+1</option>
<option value="+93">+93 - Afghanistan</option>
<option value="+355">+355 - Albania</option>
<option value="+213">+213 - Algeria</option>
<option value="+1">+1 - American Samoa</option>
...
</select>
And by setting a width on the select. However, the problem is... I have just lost usability. Now the user can no longer use the keyboard to type the name of his country and quickly jump to it.
So, how can I solve this, without javascript? Can I rearrange the select list to the previous list and clip it with CSS to display the last portion of the option?
Use a :before pseudoelement to show the prefix, e.g. http://jsbin.com/erazar/1/edit
CSS
option:before {
content: "(" attr(value) ")";
display: inline-block;
margin-right: .5em;
}
HTML
<select>
<option value="+93">Afghanistan</option>
<option value="+355">Albania</option>
<option value="+213">Algeria</option>
<option value="+1">American Samoa</option>
</select>
With this approach the prefix will appear in front of the option and your user will be able to choose the State typing its name by the keyboard
below is the select html code and I'm looking for the first option which is 15
<select>
<option value="15" selected="selected">15</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
I have tried this below and I get all the selection 15,25,50,100
div#topPager.gridHeader div.pagerItemContainer select.pagesize option
if I use the nth of type like this then I got the first selection.
div#topPager.gridHeader div.pagerItemContainer select.pagesize option:nth-of-type(1)
is there any other way of doing instead of using the nth-of-type?
More to the point and accurate:
#yourSpecificSelectors option[value="15"] {}
This is called an attribute selector, in this case it matches the option with value="15".
http://www.w3.org/TR/CSS2/selector.html#attribute-selectors
Is it possible to dynamicaly resize the visible options in select tag in forms? I have the example:
<select size="1">
<option value='1'>1
<option selected value='2'>2
<option value='3'>3
<option value='4'>4
</select>
I would like to have visible all options (to setup size dynamically with css) when design page for printing. And also to see selected option(s) in another design (color, bold ...). For resize I tried:
select{
size:4;
}
but it doesn't work. I need a working solution at least for FF, IE, Safari ...
Do have any idea?
Thanks in advance!
You can use this way:
<select size="1" size="4">
<option value='1'>1</option>
<option selected value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
And don't forget to close the </option>