How to Add an "overflow:scroll;" on the side of an extended datalist

Asked

Viewed 126 times

1

I have a search bar type="text" next to a datalist, but I’m not succeeding by adding a scroll bar on the side of the displayed content, because the more we add names in the 'option value="" the more extensive the list board is displayed, Because of this I intend to add an overflow:; to that element. Have some possibility to insert an overflow:; in this datalist ?

.bt{ position:relative; 
top:11px; 
font-size:16px; 
height:36px; 
font-weight:bold; 
width:36px; 
outline:none; 
background-image:url(../BT/Lupa.jpg); 
background-repeat:no-repeat; 
background-position:1px; 
background-size:32px 32px; 
border-radius:10px; 
border:1px solid  #06F; 
cursor:pointer; 
}
.bt:hover{ box-shadow:1px 1px 1px #000000;
}
.br{ height:30px; 
position:relative; 
left:5px; 
font-weight:bold;
border: 2px solid #06F; 
border-radius:30px; 
outline:none;
}
input::-webkit-calendar-picker-indicator {
  background-color: transparent;
}

/*Não funciona!*/
datalist { height: 50px; 
position: relative; 
overflow: scroll;
} 
<form>

<input list="ctg" type="text" class="br" oninput="myfunction()" placeholder="Pesquisar..." >

<datalist id="ctg" class="dt">

   <option value="HTML-0"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-1"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-2"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-3"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-4"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-5"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-6"><a href="Checkbox buttons checkeds.html"></a></option>

</datalist>

<input type="submit" id="ctg" class="bt" value=""/>

</form>

html css

  • You can’t use one <textarea> in the search and a <div> with overflow-y?

  • This <textarea> I enter instead of the <option> ?

  • No, I had thought the search text box was getting tight, too. Put the <div style="overflow-y: scroll"> surrounding the <options>, please.

  • It works not, it seems that that frame with the lists is unalterable, I think it must have some -Webkit- to edit it

  • Until you commented on it, I didn’t even know there was such a tag <datalist>. There must be some xunxo to fix this!

  • It has to be a Datalist or it can be a Select with Options?

  • I’m using a Js along with css, it would be better a datalist, but in case it works with select, maybe I can make the changes in Js by changing the reference

  • But I really wanted to use a scroll bar for this blessed list

  • https://stackoverflow.com/questions/8788245/how-can-i-limit-the-visible-options-in-an-html-select-dropdown

  • You can’t surround it instead of with <datalist>, surround the <option>s with <select>?

  • I just did it here, and it didn’t work, there was a kind of conflict with href=""; it seems that when you add links to the bar I compressed and it’s vertical, horrible!! kkkk

  • There is no way, my Javascript needs an input to work together with the links, and adding a select wraps everything. The good thing is that I discovered a basic little scroll through 'select' that in case I was not aware of this content yet

Show 7 more comments

1 answer

0

Nothing friend you try in a matter of CSS will work with this element, as each browser defines its own style for this type of element. See in the CSS code the commented parts.

.bt{ position:relative; 
top:11px; 
font-size:16px; 
height:36px; 
font-weight:bold; 
width:36px; 
outline:none; 
background-image:url(../BT/Lupa.jpg); 
background-repeat:no-repeat; 
background-position:1px; 
background-size:32px 32px; 
border-radius:10px; 
border:1px solid  #06F; 
cursor:pointer; 
}
.bt:hover{ box-shadow:1px 1px 1px #000000;
}
.br{ height:30px; 
position:relative; 
left:5px; 
font-weight:bold;
border: 2px solid #06F; 
border-radius:30px; 
outline:none;
}
input::-webkit-calendar-picker-indicator {
  background-color: transparent;
}

/*Não funciona!*/
datalist { 
height: 1000px !important;            /*veja aqui*/
position: relative !important; 
overflow-y: scroll !important;        /*veja aqui*/
background-color: red !important;     /*veja aqui*/
}
<form>

  <input list="ctg" type="text" class="br" oninput="myfunction()" placeholder="Pesquisar..." >

    <datalist id="ctg" class="dt">

   <option value="HTML-0"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-1"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-2"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-3"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-4"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-5"><a href="Checkbox buttons checkeds.html"></a></option>
   <option value="HTML-6"><a href="Checkbox buttons checkeds.html"></a></option>

  </datalist>

 <input type="submit" id="ctg" class="bt" value=""/>

</form>

OBS: As reference this answer here on the English website.

  • I am using Chrome

  • Yes, it is, it renders in his way this element, we can not style it, unfortunately.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.