6

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

dragonn
  • 311
  • 5
  • 20
  • 1
    Take a look at https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element. In the past, I've written my own drop-down list to do what you are doing. – bcr666 Jun 16 '21 at 15:30
  • that form is using a select, it's very different from datalist. The select option are automatically the same size as the box. Whereas you can see my input list is not matching the size of my option drowdown width. You don't have this issue when using a select dropdown though – dragonn Jun 16 '21 at 15:33
  • 2
    They say the same thing here, the list is displayed natively, so you don't have much control of it. https://stackoverflow.com/questions/13693482/is-there-a-way-to-apply-a-css-style-on-html5-datalist-options – bcr666 Jun 16 '21 at 15:44
  • @bcr666 not really tryin to style it. I just want the dropdown option to be the same width as my input – dragonn Jun 16 '21 at 17:39
  • @dragonn And you can only do that by adding some styles to it which sadly and simply impossible since it's native widget that varies from a browser to another. – johannchopin Jun 19 '21 at 07:33

2 Answers2

0

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>
Tejas Gupta
  • 496
  • 2
  • 8
  • thanks. however when I change the width to 100% OR if I change the width to a width that is 700px or greater like 900px it doesn't work – dragonn Jun 16 '21 at 16:55
  • it works for 600px or smaller, but I need it working for roughly 800px. Ideally dynamic so it works regardless of screen size – dragonn Jun 16 '21 at 17:17
0

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.

Spectric
  • 30,714
  • 6
  • 20
  • 43
  • how do I create a custom datalist to make the width match. If you look at my edit section. I created that custom datalist but the width still didn't match. Can you provide code for a custom datalist with input width that is 800px+. Thanks – dragonn Jun 21 '21 at 21:28