How set the width of drop-down items which are lengthy than the drop down width

Asked Jan 29 '20 at 06:13

Active Jan 29 '20 at 06:19

Viewed 425 times

I have a drop down : drop-down code:

<div>
    <asp:DropDownList ID="cboJobType" runat="server" />
</div>

CSS:

 #cboJobType{
            width: 485px;
            overflow: hidden;
            white-space: pre;
           -webkit-appearance: none;
        }

This causes my drop-down to look like this:

Please suggest how to limit the width of drop-down values same as drop-down width.

edited Jan 29 '20 at 06:19

asked Jan 29 '20 at 06:13

Divya

One simple way is to show ellipsis which are longer than the width of the dropdown. In this case the UI surrounding the dropdown won't be effected and on hovering the dropdown menu items you can show full text as a tooltip. – Thakur Karthik Jan 29 '20 at 06:17
Also that kind of value is not useful to an end user. If you need them to copy it, use a textarea or a span – mplungjan Jan 29 '20 at 06:20
@ThakurKarthik I added text-overflow:ellipsis also along with other css properties but it made no difference. – Divya Jan 29 '20 at 06:22

0 Answers0