locked
increase size of width RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-807418713 posted

    Hello

    I Used this below code

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.min.css" />
    <script>
        $(document).ready(function () {
            $('#ListBox1').SumoSelect({search: true, searchText: 'Enter here.'});
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ListBox ID="ListBox1" runat="server" selectionmode="Multiple" DataTextField="UName" DataValueField="UID" DataSourceID="SqlDataSource1"></asp:ListBox>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.;Initial Catalog=DatabaseTestPool;Integrated Security=True" SelectCommand="select UID,UName from Users"></asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

    I want to increase like this width 

    Tuesday, September 10, 2019 7:19 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-719153870 posted

    Hi Gopi.MCA,

    I want to increase like this width 

    In this case, you will need to use the local reference of this sumoselect.css, you can download the related two files ( jquery.sumoselect.min.js and sumoselect.css).

    Like below in your project:

    Then, in your local sumoselect.css, change

    .SumoSelect {
    width: 200px;
}

    to:

    .SumoSelect {
    width: 300px;//or any other width you want
}

    or to:

    .SumoSelect {
    width: inherit;
}

    then you can rewrite this style in your current page.

    Please refer to below demo:

    <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.min.js"></script>
    <link href="Scripts/sumoselect.css" rel="stylesheet" />
    <%--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.min.css" />--%>
    <script>
        $(document).ready(function () {
            $('#ListBox1').SumoSelect({search: true, searchText: 'Enter here.'});
        });
    </script>
    <style>
        .SumoSelect {
            width: 300px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ListBox ID="ListBox1" runat="server" selectionmode="Multiple" DataTextField="UName" DataValueField="UID" DataSourceID="SqlDataSource1"></asp:ListBox>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.;Initial Catalog=DatabaseTestPool;Integrated Security=True" SelectCommand="select UID,UName from Users"></asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

    You will get the result like below:

    Best Regard,

    Yang Shen

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, September 10, 2019 7:37 AM