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".
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.
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.
Member
9 Points
68 Posts
jQuery Customselect do not in-line with div tag
May 12, 2020 03:19 PM|test0101|LINK
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>Member
9 Points
68 Posts
Re: jQuery Customselect do not in-line with div tag
May 13, 2020 04:05 AM|test0101|LINK
any body can help me?
Participant
1110 Points
299 Posts
Re: jQuery Customselect do not in-line with div tag
May 13, 2020 07:09 AM|Sean Fang|LINK
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
Member
9 Points
68 Posts
Re: jQuery Customselect do not in-line with div tag
May 13, 2020 08:00 AM|test0101|LINK
Thanks Sean Fang very much!!!
It's exactly I need !
Member
9 Points
68 Posts
Re: jQuery Customselect do not in-line with div tag
May 13, 2020 11:15 AM|test0101|LINK
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.
All-Star
47661 Points
20886 Posts
Re: jQuery Customselect do not in-line with div tag
May 13, 2020 11:40 AM|mgebhard|LINK
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.