datalist option width smaller than input width when px more than 600px. How do I fix it dynamically on chrome

user_9352713 0
Viewed 2300

Hi all I'm using flask WTForm form control class for the width, but not sure how to do that in snipet so i hardcode the width.

The issue I'm facing is that the input is really long, but the dropdown option don't match the input width. When you run the snippet you could see that the dropdown is like 1/10 of the input width. I tried giving option and the datalist the same width, but nothing works.

How would I make it so the option dropdown on chrome the same width as my input thanks

<input class="form-control" type="text" id="color" style = "width:800px" list="colors_data">
                        <datalist id="colors_data"class="form-control"style = "width:800px">
                          <option style = "width:800px"value="red"></option>
                          <option style = "width:800px"value="orange"></option>
                          <option style = "width:800px"value="green"></option>
                          <option style = "width:800px"value="blue">The color of the sky</option>
                        </datalist>

Edit: change size to 800px I try creating my own datalist via this link but I'm facing the same issue Creating a HTML5 datalist on the fly

I included a picture to show the problem more clearly. As you can see the dropdown option is a lot smaller than the input itself. How do I fix this thanks enter image description here

flask css html
2 Answers

Ok now that I finally know what you wanted, here is your code:

<input style = "width:200px; height:30px;" list="colors_data">
<datalist id="colors_data">
<option value="red">The color of apple</option>
<option value="orange">The color of sun</option>
<option value="green">The color of grass</option>
<option value="blue">The color of the sky</option>
</datalist>

user_146686420

The <datalist> element is very inflexible - you cannot style it at all as its styling comes from the browser and the browser only.

If you want to set a width or apply any other styling, you're going to have to settle with a custom <datalist>.

You could, however, try programmatically adding &nbsp; to the value to artificially widen the length of the <datalist>, but Chrome sets a maximum width on datalists, so beyond a certain point it will simple cut off.

user_142512210
Related