Jump to content
Nic727

scrolling datalist

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by dustcomposer

Share this post


Link to post
Share on other sites

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 by Nic727

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...