locked
jQuery Customselect do not in-line with div tag RRS feed

  • Question

  • User-475949336 posted

    Dear all

    I'm using this tools for searchable in dropdownlist, but I'm facing one problem, is that label and dropdownlist don't in-line with div tag.

    this is before add jQuery Customselect:  PICTURE1

    and after add jQuery Customselect: PICTURE 2

    I want it' always in-line as PICTURE1.

    PLEASE HELP ME ASAP! THANKS ADVANCE

    MY CODE:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="Quanlynhachothue.test" %>
    <!DOCTYPE html>
    
    <meta name="viewport" content="width = device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    
     <script type="text/javascript" src='./css-js-Menu/jquery-3.5.0.min.js'></script>      
    
     <script type="text/javascript" src="./js/jquery-customselect-1.9.1.min.js"></script>
    
     <link rel="stylesheet" type="text/css" href="./js/jquery-customselect-1.9.1.css" />   
    
      <body>
        <form id="form1" runat="server">   
        <div>
        <label for="lbl1">
        <asp:label id="Label1" runat="server" for="lblName">Name</asp:label>
        <asp:DropDownList class="custom-select"  id="txtName" width="128px" Height ="30px" runat="server">
             <asp:ListItem Text="A" Value="1" ></asp:ListItem>
             <asp:ListItem Text="B" Value="2" ></asp:ListItem>
             <asp:ListItem Text="C" Value="3" ></asp:ListItem>
             <asp:ListItem Text="D" Value="4" ></asp:ListItem> 
        </asp:DropDownList>
        </label>
    
       <label for="lbl2">
        <asp:label id="Label2" runat="server" for="lbladress">Address</asp:label>
           <asp:TextBox ID="txtAddress" width="128px" Height ="30px" runat="server"></asp:TextBox>
       </label>
       </div>
    
        </form>
    </body>
    
        <script type="text/javascript">   
    
            $(document).ready(function ()
            {
                $("#<%=txtName.ClientID%>").customselect();
           });
      </script>

    Tuesday, May 12, 2020 3:19 PM

Answers

  • User-1330468790 posted

    Hi test0101,

     

    I have tried your codes and find that the problem is located in the CSS style.

    If you check the rendered page in dev-tool (press F12 in browsers), you will see that the drop down list is a <div> block.

    One of the solutions is to make this <div> displayed as an inline element.

    You could refer to below codes.

    <head runat="server">
        <title></title>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
        <script src="Content/customselect/jquery-customselect-1.9.1.min.js"></script>
        <link rel="stylesheet" href="Content/customselect/jquery-customselect-1.9.1.css"/>
        <style type="text/css">
            .custom-select {
                display:inline-block;
            }
        </style>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <label for="lbl1">
                    <asp:Label ID="Label1" runat="server" for="lblName">Name</asp:Label>
                    <asp:DropDownList class="custom-select" ID="txtName" Width="128px" Height="50px" runat="server">
                        <asp:ListItem Text="A" Value="1"></asp:ListItem>
                        <asp:ListItem Text="B" Value="2"></asp:ListItem>
                        <asp:ListItem Text="C" Value="3"></asp:ListItem>
                        <asp:ListItem Text="D" Value="4"></asp:ListItem>
                    </asp:DropDownList>
                </label>
    
                <label for="lbl2">
                    <asp:Label ID="Label2" runat="server" for="lbladress">Address</asp:Label>
                    <asp:TextBox ID="txtAddress" Width="128px" Height="30px" runat="server"></asp:TextBox>
                </label>
            </div>
    
        </form>
        <script type="text/javascript">   
            $(document).ready(function () {
                $("#<%=txtName.ClientID%>").customselect();
            });
      </script>
    </body>

    The custom select class will make the select element to be included in a div with class "custom-select" so that you have to change the display property to "inline-block".

    Result:

      

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 13, 2020 7:09 AM

All replies

  • User-475949336 posted

    any body can help me?

    Wednesday, May 13, 2020 4:05 AM
  • User-1330468790 posted

    Hi test0101,

     

    I have tried your codes and find that the problem is located in the CSS style.

    If you check the rendered page in dev-tool (press F12 in browsers), you will see that the drop down list is a <div> block.

    One of the solutions is to make this <div> displayed as an inline element.

    You could refer to below codes.

    <head runat="server">
        <title></title>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
        <script src="Content/customselect/jquery-customselect-1.9.1.min.js"></script>
        <link rel="stylesheet" href="Content/customselect/jquery-customselect-1.9.1.css"/>
        <style type="text/css">
            .custom-select {
                display:inline-block;
            }
        </style>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <label for="lbl1">
                    <asp:Label ID="Label1" runat="server" for="lblName">Name</asp:Label>
                    <asp:DropDownList class="custom-select" ID="txtName" Width="128px" Height="50px" runat="server">
                        <asp:ListItem Text="A" Value="1"></asp:ListItem>
                        <asp:ListItem Text="B" Value="2"></asp:ListItem>
                        <asp:ListItem Text="C" Value="3"></asp:ListItem>
                        <asp:ListItem Text="D" Value="4"></asp:ListItem>
                    </asp:DropDownList>
                </label>
    
                <label for="lbl2">
                    <asp:Label ID="Label2" runat="server" for="lbladress">Address</asp:Label>
                    <asp:TextBox ID="txtAddress" Width="128px" Height="30px" runat="server"></asp:TextBox>
                </label>
            </div>
    
        </form>
        <script type="text/javascript">   
            $(document).ready(function () {
                $("#<%=txtName.ClientID%>").customselect();
            });
      </script>
    </body>

    The custom select class will make the select element to be included in a div with class "custom-select" so that you have to change the display property to "inline-block".

    Result:

      

    Hope this can help you.

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, May 13, 2020 7:09 AM
  • User-475949336 posted

    Thanks Sean Fang very much!!!

    It's exactly I need !

    Wednesday, May 13, 2020 8:00 AM
  • User-475949336 posted

    Hi Sean Fang 

    I updated your code, on laptop, PC it's very good for seachable in dropdownlist. But In mobile it don't show textbox  to type something for search on drownlist.

    Wednesday, May 13, 2020 11:15 AM
  • User475983607 posted

    Hi Sean Fang 

    I updated your code, on laptop, PC it's very good for seachable in dropdownlist. But In mobile it don't show textbox  to type something for search on drownlist.

    The library is very buggy.  Event the published demo page has issues with screen size.  Contact the owners for support, try to fix the code yourself, or find a different library.

    Wednesday, May 13, 2020 11:40 AM