locked
Jquery Drodpownlist Show Data Top Not In Bottom RRS feed

  • Question

  • User-807418713 posted

    Hello

    My Asp.net Jquery Dropdownlist shows like this below

    but i want it would show top not in bottom like this below

    Thanks

    Thursday, August 30, 2018 6:12 AM

Answers

  • User2103319870 posted

    Add the below css to your page

     <style>
                .chosen-container .chosen-drop {
                    border-bottom: 0;
                    border-top: 1px solid #aaa;
                    top: auto;
                    bottom: 40px;
                }
            </style>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 2, 2018 11:45 PM

All replies

  • User839733648 posted

    Hi Gopi.MCA,

    According to your description, I couldn’t directly provide the solution about how to achieve your requirements.

    Could you please post more details codes about the html and jquery makeup?

    If you could post more details information, it will be more easily for us to reproduce the issue and find the solution.

    Best Regards,

    Jenifer

    Friday, August 31, 2018 8:17 AM
  • User-807418713 posted

    Hello

    Here Is the code

    <script type="text/javascript" src="jquery.min.js" ></script>
    <script type="text/javascript" src="Scripts/chosen.jquery.min.js" ></script>
    <link rel="stylesheet" href="chosen.css" />
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script type="text/javascript" src="Scripts/chosen.jquery.js" ></script>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="bootstrap.min.js"></script>
    
        
        <script type="text/javascript">
            $(function () {
                $(".chzn-select").chosen({
                    search_contains: true                
                 });
                Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
                function EndRequestHandler(sender, args) {
                    //Binding Code Again
                    $(".chzn-select").chosen({
                    search_contains: true                
                 });
                }
            });
        </script>

    Dropdownlist code

     <asp:DropDownList id="DropDownList99" runat="server"  DataSourceID="CN" AutoPostBack="True" width="140px" 
    OnSelectedIndexChanged="DropDownList99_SelectedIndexChanged" 
    DataValueField="ItemName"  class="chzn-select"  
    DataTextField="ItemName" SelectedValue='<%# Bind("ItemName") %>'>
     </asp:DropDownList>

    It showing data like this 

    but i want dropdownlist to show data on top not bottom like this

    Friday, August 31, 2018 10:32 AM
  • User-474980206 posted

    its not a feature supported by chosen. I reviewed the code on GitHub, and the top down is done with just CSS. with a some work you might change the CSS to work the way you want. to get some hints see:

    https://www.w3schools.com/howto/howto_css_dropup.asp

    you other option is to pick a menu library that has this feature.

    Saturday, September 1, 2018 8:21 PM
  • User-807418713 posted

    Hello

    Can Any One Give Me The Css file for choosen.css

    Thanking You

    Sunday, September 2, 2018 11:47 AM
  • User2103319870 posted

    Add the below css to your page

     <style>
                .chosen-container .chosen-drop {
                    border-bottom: 0;
                    border-top: 1px solid #aaa;
                    top: auto;
                    bottom: 40px;
                }
            </style>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, September 2, 2018 11:45 PM