<script type="text/javascript">
// The following function is the listener for the auto complete drop down.
// Note: The width has to be specified here. This overrides the width in chosen.css.
// The other styles (left, top..etc) are specified in chosen.css because it's being
// in if it's specified next to width in here.
$(document).ready(function () {
InitDropDown();
})
function InitDropDown() {
var config = {
'.ChosenSelector': { allow_single_deselect: true, search_contains: true, width: "350px"},
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
}
</script>
I am loading the data from db. The data gets loaded and the drop down works but I have a hard time positioning (setting top, left etc properties).
If I add the top and left properties in the chosen-container element in chosen.css, then it position the control. But in the css it say, it's generated and shouldn't be changed.
If I add the top and left properties in the chosen-container element in chosen.css, then it position the control. But in the css it say, it's generated and shouldn't be changed.
So there's no problem yet and you have some concerns about if changing the chosen.css file will cause problems?
As it says it should not be changed( directly in the css file) since this css could be appended on other palces(controls or html tags) and these places would be changed too.
But, you can change the css style in current page and it won't affect the chosen.css file since the inline css ( html style attribute ) overrides css rules in style tag and css file which you can refer to What
is the order of precedence for CSS?.
Add the top and left properties in the current page style instead of in the css file would be a better choice.
Thank you for your help. I tried that and it works. chosen-container in the ChosenSelector.css is the base class. So I am changing certain properties in that in the page and it works.
Everything is fine for one drop down. How about if I have 2 or more drop downs? It will be the same Chosen.css but how do I override the properties for the 2nd drop down?
How about if I have 2 or more drop downs? It will be the same Chosen.css but how do I override the properties for the 2nd drop down?
Please notice the class attribute of the controls is just a css style which can be defined in your css files or in your html page directly ( inline css has higher priority), it does not matter what's the name of this css style.
what matters is the code inside the css style, which in your case:
If you have multiple controls share the same class and you just want to change one or some of their html style, copy the original css style to your current page and rename it so it will not affect other controls.
None
0 Points
72 Posts
Chosen Jquery autocomplete drop down - setting top, left properties
Feb 04, 2020 02:50 PM|rushdib|LINK
Hi,
I am using the following generic code for the drop down:
control:
<asp:DropDownList ID="ddApprover" runat="server" CssClass="ChosenSelector" AppendDataBoundItems="true">
</asp:DropDownList>
script
<script type="text/javascript">
// The following function is the listener for the auto complete drop down.
// Note: The width has to be specified here. This overrides the width in chosen.css.
// The other styles (left, top..etc) are specified in chosen.css because it's being
// in if it's specified next to width in here.
$(document).ready(function () {
InitDropDown();
})
function InitDropDown() {
var config = {
'.ChosenSelector': { allow_single_deselect: true, search_contains: true, width: "350px"},
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
}
</script>
I am loading the data from db. The data gets loaded and the drop down works but I have a hard time positioning (setting top, left etc properties).
If I add the top and left properties in the chosen-container element in chosen.css, then it position the control. But in the css it say, it's generated and shouldn't be changed.
Thanks,
Contributor
3110 Points
983 Posts
Re: Chosen Jquery autocomplete drop down - setting top, left properties
Feb 05, 2020 02:21 AM|Yang Shen|LINK
Hi rushdib,
So there's no problem yet and you have some concerns about if changing the chosen.css file will cause problems?
As it says it should not be changed( directly in the css file) since this css could be appended on other palces(controls or html tags) and these places would be changed too.
But, you can change the css style in current page and it won't affect the chosen.css file since the inline css ( html style attribute ) overrides css rules in style tag and css file which you can refer to What is the order of precedence for CSS?.
Add the top and left properties in the current page style instead of in the css file would be a better choice.
Best Regard,
Yang Shen
None
0 Points
72 Posts
Re: Chosen Jquery autocomplete drop down - setting top, left properties
Feb 05, 2020 03:28 PM|rushdib|LINK
Hi,
I tried setting the style property on the page and it doesn't work. The chosen.css overrides I think.
~~~
<asp:DropDownList ID="ddApprover" runat="server" CssClass="ChosenSelector" style="z-index: 1; left: 200px; top: 307px; height: 21px; position: absolute" AppendDataBoundItems="true" AutoPostBack="True">
</asp:DropDownList>
~~~
None
0 Points
72 Posts
Re: Chosen Jquery autocomplete drop down - setting top, left properties
Feb 05, 2020 04:41 PM|rushdib|LINK
I tried this as well, but doesn't work. Added a style in the page and changed the css in the drop down.
<style>
.setStyle {
position: absolute;
top: 300px;
left: 250px;
}
</style>
CssClass="setStyle ChosenSelector"
None
0 Points
72 Posts
Re: Chosen Jquery autocomplete drop down - setting top, left properties
Feb 05, 2020 04:45 PM|rushdib|LINK
The drop down I added, stays on top of the page.
Contributor
3110 Points
983 Posts
Re: Chosen Jquery autocomplete drop down - setting top, left properties
Feb 06, 2020 02:48 AM|Yang Shen|LINK
Hi rushdib,
It's not about change the style in your controls or set another css style, you need to change the specific css in your current page.
<asp:DropDownList ID="ddApprover" runat="server" CssClass="ChosenSelector" style="z-index: 1; left: 200px; top: 307px; height: 21px; position: absolute" AppendDataBoundItems="true" AutoPostBack="True"> </asp:DropDownList>From your code, the css should be
ChosenSelector, find this style in your chosen.css file and copy and paste it in your current page, then update it.I don't have this chosen.css file so i built a demo based on Bootstrap buttons:
aspx:
<head runat="server"> <title></title> <link href="Content/bootstrap.css" rel="stylesheet" /> <style> .btn-primary { color: #fff; background-color: red; //here i changed the bgcolor of this style to red border-color: #2e6da4; } </style> </head> <body> <form id="form1" runat="server"> <div> <input type="button" class="btn btn-primary" value="submit"/> </div> </form> </body> </html>The original css style in bootstrap.css file:
.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; }Here's the result of this demo:
Best Regard,
Yang Shen
None
0 Points
72 Posts
Re: Chosen Jquery autocomplete drop down - setting top, left properties
Feb 06, 2020 01:48 PM|rushdib|LINK
Hi Yang,
Thank you for your help. I tried that and it works. chosen-container in the ChosenSelector.css is the base class. So I am changing certain properties in that in the page and it works.
Everything is fine for one drop down. How about if I have 2 or more drop downs? It will be the same Chosen.css but how do I override the properties for the 2nd drop down?
Thanks in advance,
Rushdi
~~~
page
<style>
.chosen-container{
top: 307px;
left: 250px;
font-family: Arial;
font-size: small;
font-weight: bold;
height: 21px;
}
</style>
control
<asp:DropDownList ID="ddBranch" runat="server" CssClass="ChosenSelector chosen-container" AppendDataBoundItems="true" AutoPostBack="True">
</asp:DropDownList>
Chosen.css
/* @group Base */
.chosen-container {
position: absolute;
display: inline-block;
vertical-align: middle;
font-size: 13px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
~~~
Contributor
3110 Points
983 Posts
Re: Chosen Jquery autocomplete drop down - setting top, left properties
Feb 07, 2020 02:01 AM|Yang Shen|LINK
Hi rushdib,
Please notice the class attribute of the controls is just a css style which can be defined in your css files or in your html page directly ( inline css has higher priority), it does not matter what's the name of this css style.
what matters is the code inside the css style, which in your case:
If you have multiple controls share the same class and you just want to change one or some of their html style, copy the original css style to your current page and rename it so it will not affect other controls.
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Content/bootstrap.css" rel="stylesheet" /> <style> .btn-primary1 { color: #fff; background-color: red; border-color: #2e6da4; } </style> </head> <body> <form id="form1" runat="server"> <div> <input type="button" class="btn btn-primary1" value="submit"/> <input type="button" class="btn btn-primary" value="submit"/> </div> </form> </body> </html>Best Regard,
Yang Shen