Give a fixed length to options in a datalist

Question

I have this HTML Code :

<style type="text/css">
.select {
    white-space:pre-wrap;
    background-color:#FF9;  
        width: 500px;
}
</style>
<input type="text" list="browsers" class="select"/>
<datalist  id=browsers >
    <?php while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)) {;?>
    <option>
        <?php echo $row_Recordset1['RBC']; }?>
    </option>
</datalist>

I have some datas more than 500px , therfore when I click on the text box the list width greater than text box width(500px)

How can i fix the list width?

You probably can't: http://stackoverflow.com/questions/13693482/html5-is-there-a-way-to-apply-a-css-style-on-datalist-options — James Donnelly, Mar 28 '13 at 09:15

score 0 · Answer 1 · answered Mar 28 '13 at 09:24

0

The only way you can do it is by using CSS with the white-space property and no-wrap.
http://www.w3schools.com/cssref/pr_text_white-space.asp

Or you can use a div around the input to force the size, let the input be the size it needs to be and use the div with overflow-x to control the size and force it to 500px width.

answered Mar 28 '13 at 09:24

Ryoku

792
1
5
18

2

The question is about the `datalist`, not the `input` field. – James Donnelly Mar 28 '13 at 09:50
Of course the question is about the datalist, but the datalist shouldn't be the one defining the size, it doesn't work that way. @sermed were you able to fix it? – Ryoku Mar 29 '13 at 04:28
@Ryoku , till now i didn't able. – sermed Mar 29 '13 at 08:18
Can you please show all the code you have until now, I might be able to help- – Ryoku Mar 29 '13 at 08:33
From the looks of it you'll need to do it with JS. – Ryoku Mar 31 '13 at 01:25

Give a fixed length to options in a datalist

1 Answers1