locked
Chosen Jquery autocomplete drop down - setting top, left properties RRS feed

  • Question

  • User1608380851 posted

    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,

    Tuesday, February 4, 2020 2:50 PM

All replies

  • User-719153870 posted

    Hi rushdib,

    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.

    Best Regard,

    Yang Shen

    Wednesday, February 5, 2020 2:21 AM
  • User1608380851 posted

    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; " AppendDataBoundItems="true" AutoPostBack="True">
    </asp:DropDownList>

    ~~~

    Wednesday, February 5, 2020 3:28 PM
  • User1608380851 posted

    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 {
    ;
    top: 300px;
    left: 250px;
    }
    </style>

    CssClass="setStyle ChosenSelector"

    Wednesday, February 5, 2020 4:41 PM
  • User1608380851 posted

    The drop down I added, stays on top of the page. 

    Wednesday, February 5, 2020 4:45 PM
  • User-719153870 posted

    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; " 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

    Thursday, February 6, 2020 2:48 AM
  • User1608380851 posted

    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 {
    ;
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    ~~~

    Thursday, February 6, 2020 1:48 PM
  • User-719153870 posted

    Hi rushdib,

    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:

    ;
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    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

    Friday, February 7, 2020 2:01 AM