Fix width of drop down menu in select option

Question

When I open my dropdown list, the width of list is greater than drop down box. List width should same as drop down box.

Answer 1

You can use the following:

select, option { width: __; }

Keep in mind this may not work on Google Chrome. If you want a cross-browser solution you will probably have to use PHP to clip the String with SubStr. You can probably also use jQuery to set the length of the option text.

jQuery('#dropdown option').each(function() {
var optionText = this.text;
console.log(optionText);
var newOption = optionText.substring(0,19);
console.log(newOption);
jQuery(this).text(newOption + '..');
});

select, option {
    width:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <select id="dropdown" style="width:150px;">
                <option value="test">123123123123123123123123123123</option>
                <option value="test2">123123123123123123123123123123</option>
                <option value="test3">123123123123123123123123123123</option>
            </select>
        </td>
        <td>
            <input type="text">
        </td>
    </tr>
</table>

JsFiddle

You will have to set the substring values of

var newOption = optionText.substring(0,19);

By yourself though.

Answer 2

Try to set width of options same as select box

    #SelectBoxid {
  width:150px; 
}
 #SelectBoxid option{
   width:150px; 
}