locked
increase size of width RRS feed

  • Question

  • 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

  • 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