scrolling datalist

[Nic727]

Hi,

 

I'm creating a data list for my contact form and I have a problem. I hate too much option to fit on screen and I would like to have a small number of option and a scrollbar on the side.

 

My HTML5

<input type="text" list="countries" name="mycountry" />					<datalist id="countries">									<option value="Afghanistan">Afghanistan</option>									<option value="Afrique du Sud">Afrique du Sud</option>									<option value="Albanie">Albanie</option>									<option value="Algérie">Algérie</option>									<option value="Allemagne">Allemagne</option>									<option value="Andorre">Andorre</option>									<option value="Angola">Angola</option>									<option value="Antigua et Barbuda">Antigua et Barbuda</option>									<option value="Arabie saoudite">Arabie saoudite</option>									<option value="Argentine">Argentine</option>									<option value="Arménie">Arménie</option>									<option value="Australie">Australie</option>									<option value="Autriche">Autriche</option>									<option value="Azerbaïdjan">Azerbaïdjan</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>									<option value="Hors Canada">Hors Canada</option>					</datalist>

I know that you can use <select> tag and put a size in it, but I'm searching on the web if it's possible with a datalist and I find nothing.

 

[Ingolme]

It seems that the datalist provides possible values for text inputs. Text inputs only take one value.

[Nic727]

That's what I have for my datalist. On Chrome, I can search for the option I want without writing a letter, so I have something weird. Too much options!!!

http://image.noelshack.com/fichiers/2014/47/1416257880-sans-titre.png

[dustcomposer]

Select option with css will work.

 

<select name="mycountry">    <option value="Afghanistan">Afghanistan</option>    <option value="Afrique du Sud">Afrique du Sud</option>    <option value="Albanie">Albanie</option>    <option value="Algérie">Algérie</option>    <option value="Allemagne">Allemagne</option>    <option value="Andorre">Andorre</option>    <option value="Angola">Angola</option>    <option value="Antigua et Barbuda">Antigua et Barbuda</option>    <option value="Arabie saoudite">Arabie saoudite</option>    <option value="Argentine">Argentine</option>    <option value="Arménie">Arménie</option>    <option value="Australie">Australie</option>    <option value="Autriche">Autriche</option>    <option value="Azerbaïdjan">Azerbaïdjan</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option></select>

CSS

select option {    height: 50px;    background-color: lavender;}

Or simply size the select input:

<select size='5' name="mycountry">    <option value="Afghanistan">Afghanistan</option>    <option value="Afrique du Sud">Afrique du Sud</option>    <option value="Albanie">Albanie</option>    <option value="Algérie">Algérie</option>    <option value="Allemagne">Allemagne</option>    <option value="Andorre">Andorre</option>    <option value="Angola">Angola</option>    <option value="Antigua et Barbuda">Antigua et Barbuda</option>    <option value="Arabie saoudite">Arabie saoudite</option>    <option value="Argentine">Argentine</option>    <option value="Arménie">Arménie</option>    <option value="Australie">Australie</option>    <option value="Autriche">Autriche</option>    <option value="Azerbaïdjan">Azerbaïdjan</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option>    <option value="Hors Canada">Hors Canada</option></select>

Edited November 17, 2014 by dustcomposer

[Nic727]

Thank youEDIT:I know that with <select> you can make stuffs appearing like you want, but with <datalist>, I'm looking into a better dynamic search option when you write and you have to options matching the letter. All work fine, but when you click to write, you have the full list, but I would like to have only the top 5 option and a scroll bar and be able to write what you are looking for at the same time. I tried with IE11 and Chrome; With Chrome, you don't have a scroll bar, but with IE11, but you have about 11 options listed. Whatever, I found that : http://harvesthq.github.io/chosen

 

But it could be nice if someone who are working to develop HTML5 to be able to add CSS styles and more option to <datalist>, because it's a great dynamic tag, but we can't do what we want.

Thank you

Edited November 18, 2014 by Nic727