How to display selected text on drop down list in 2 lines in ASP.NET?

Question

I have a dropdownlist in asp.net webform with long values as its options. Every time I select a value, it should be displayed on the dropdownlist field.

<asp:DropDownList ID="addressDdl" runat="server" CssClass="form-control" Width="210px">
 </asp:DropDownList>

I populate my dropdownlist using this method:

protected void Page_Load(object sender, EventArgs e) 
{
    List<address> addressAll = //get table data from SQL that has been returned as a list

    addressDdl.DataSource = addressAll;
    addressDdl.DataTextField = "address";
    addressDdl.DataValueField = "addressID";
    addressDdl.DataBind();
    addressDdl.Items.Insert(0,"--Select--");
}

However, since my dropdownlist is not long enough, it can only display parts of it. Is there any way so the dropdownlist is able to display the selected value in 2 lines?

Below is an example of the problem I face:

Answer 1

Since you're using form-control CSS class, I'm sure that you're using Bootstrap CSS.

In Bootstrap, it is possible to implement multi-line options using data-content attribute for select element.

Note: For 2 first choices available below, ensure any long string value you want to show in data-content have <br /> tag inserted between them (see this example fiddle). The tag can be inserted by using String.Insert (suggested using additional property that stores wrapped value in address class):

foreach (var addr in addressAll)
{
    if (addr.address.Length >= [position_index])
    {
        // new property to store wrapped values to be displayed in data-content attribute
        addr.longAddress = addr.address.Insert([position_index], "<br />");
    }
}

1) To implement the custom attribute with asp:DropDownList server control, add it manually in code-behind after data binding. Here is the code-behind part:

protected void Page_Load(object sender, EventArgs e)
{
     List<address> addressAll = ... //get table data from SQL that has been returned as a list

     addressDdl.DataSource = addressAll;
     addressDdl.DataTextField = "address";
     addressDdl.DataValueField = "addressID";
     addressDdl.DataBind();
     addressDdl.Items.Insert(0,"--Select--");

     // before transform the list into array, use foreach loop provided above

     var arr = addressAll.ToArray();

     // note: zero-index skipped here
     for (int i = 1; i <= addressDdl.Items.Count; i++)
     {
         // add data-content attribute for select options
         addressDdl.Items[i].Attributes.Add("data-content", arr[i - 1].longAddress.ToString());
     }
}

2) As an alternative, a Repeater may be used to replace DropDownList with plain select element, but with ItemTemplate to set option attributes:

ASPX

<asp:Repeater ID="rptDeliveryAddress" runat="server">
    <HeaderTemplate>
        <select id="addressDdl">
            <option value="">--Select--</option>
    </HeaderTemplate>
    <ItemTemplate>
            <option data-content="<%# DataBinder.Eval(Container.DataItem, "[longAddress]") %>" value="<%# DataBinder.Eval(Container.DataItem, "[address]") %>"><%# DataBinder.Eval(Container.DataItem, "[address]") %></option>
    </ItemTemplate>
    <FooterTemplate>
        </select>
    </FooterTemplate>
</asp:Repeater>

3) Another way I know to use multi-line dropdown is manipulating width in CSS selector together with selectPicker:

ASPX

<asp:DropDownList ID="addressDdl" runat="server" CssClass="form-control selectpicker large-bootstrap-select" ... />

CSS

/* CSS Class */
.bs-container.large-bootstrap-select {
   .dropdown-menu {
      width: 100px; /* set this attribute with desired size in pixels */
      li a span.text {
         word-wrap: break-word;
         white-space: normal;
      }
   }
}

JS

$('#<%= addressDdl.ClientID %>').selectpicker();

References:

How to add a data-attribute to a dropdown menu with C#

Is it possible to have multi-line options?

Answer 2

you can give static height and white-space: initial; to select

#wgtmsr{
 width:150px;  
 height: 50px;
 white-space: initial;
}

#wgtmsr option{
 width:100px;   
}

<select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">OunceOunceOunce OunceOunce OunceOunceOunce</option>
</select>