Remove From My Forums

Multiline dropdownlist

Question
0

Sign in to vote

User1310055179 posted

Hi,

I'm looking for a way to add a two lines drop-down list with two lines in the option items.

What is the best way to achieve that?

I can't show a trimmed text after item selection. The selection text must be fully presented to the user (in two lines) .

Wednesday, May 29, 2019 8:28 AM

Answers

0

Sign in to vote
User-1038772411 posted

Hi, qsoft_developer

Please refer the following links, I hope this will help you to solve your problem

1) https://stackoverflow.com/questions/45342863/how-to-display-selected-text-on-drop-down-list-in-2-lines-in-asp-net/45347463#45347463
2)https://forums.asp.net/t/1583713.aspx?DropDownList+with+multiline+ListItems
3)https://forums.asp.net/p/1265569/2378192.aspx

Thanks.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Wednesday, May 29, 2019 10:24 AM

User665608656 posted

Hi qsoft_developer,

According to your description, I suggest you use the selectpicker() method in bootstrap.

First you need to refer to some corresponding links of bootstrap. Then add class attribute to your dropdownlist as selectpicker.

In addition, put the item you display in data-content and add <br> where you need to change lines.

For more details , you could refer to following codes:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css" />
    <link rel="stylesheet " type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $('.selectpicker').selectpicker();
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:DropDownList ID="DropDownList1" runat="server" CssClass="selectpicker">
                <asp:ListItem data-content="First Line<br>Second Line"></asp:ListItem>
                <asp:ListItem data-content="House Number Street<br>City, State<br>Zip Code"></asp:ListItem>
                <asp:ListItem data-content="Single line address"></asp:ListItem>
            </asp:DropDownList>
        </div>
    </form>
</body>
</html>

The result of my work demo:

Best Regards,

YongQing.

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, May 30, 2019 9:30 AM

All replies

0

Sign in to vote
User-1038772411 posted

Hi, qsoft_developer

Please refer the following links, I hope this will help you to solve your problem

1) https://stackoverflow.com/questions/45342863/how-to-display-selected-text-on-drop-down-list-in-2-lines-in-asp-net/45347463#45347463
2)https://forums.asp.net/t/1583713.aspx?DropDownList+with+multiline+ListItems
3)https://forums.asp.net/p/1265569/2378192.aspx

Thanks.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Wednesday, May 29, 2019 10:24 AM
0

Sign in to vote

User-2054057000 posted

Multiselect or Multiline dropdownlist controls can be created easily in ASP.NET website. I recommend you to read this tutorial:

Learn 3 Ways to create jQuery Multiselect feature in your website

Thursday, May 30, 2019 2:47 AM