Question

I have created a select list using PHP, and when clicking on it to select an option from the drop down the option list jumps to the top of the page showing about 3 options, and the rest are off the page.

It only happens in Chrome. Is there a way to fix this using CSS?

Here’s the relevant code:

HTML

<tr>
    <td><label>Manufacturer</label></td>
    <td>
        <select id="prodManufacturer" class="validate[required]" name="prodManufacturer">
            <?php foreach($aAllManufacturer as $aManufacturer){ ?> 
                <option value="<?php echo $aManufacturer['prod_manufacturer_id']; ?>">
                    <?php echo $aManufacturer['prod_manufacturer_name']; ?></option>
            <?php } ?>
        </select>
    </td>
</tr>

CSS

#productFormContentWrapper select {
    margin: 0;
    padding: 0;
    color: #9d1116;
    font-size: 18px;
    padding: 3px;
}

Answer 1

According to Mozilla Developer Network:

If the control is presented as a scrolled list box, this attribute
represents the number of rows in the list that should be visible at
one time. Browsers are not required to present a select elements as a
scrolled list box.

Simply omit the size attribute or set its value to 0 (or 1, if following the HTML5 specs, but this apparently causes legacy issues, so avoid it for now).

See a live demo on jsFiddle.

References:

• select element on MDN