locked
set fiexed psotion of glyco icon RRS feed

  • Question

  • User81789783 posted

    i have drop down like this ,i need to set fixed postion of glyco icon (down arrow) even any item selected in  drop down ,it disrtubed when i select any item frm drop down

     $(".ddlitemvalue").click(function (e) {
                    alert($(this).html())
    
                  //  $('#topdivselect').find('span').text($(this).html())
                    $('span:first', "#topdivselect").text($(this).html())
                })

    <div id="mainddl">
                            <div id="topdivselect" style="background-color:#beb1b1;width: 20rem;;padding-bottom: 0.3rem;">
                              <p>
                                <span  style="text-align:left;width:10rem"> Select Category</span>
                         <span style="text-align:right;width:8rem;" class="glyphicon glyphicon-arrow-down"></span>
                              </p>
                            </div>
                      
                            <div  id="bottomdivselect" style="display:none;border-style: groove;width: 20rem">
    
                                <div class="ddlitemvalue">one</div>
                                <div class="ddlitemvalue">two</div>
                                <div class="ddlitemvalue">three</div>
                            </div>
                        </div>

    Friday, March 22, 2019 4:51 AM

Answers

  • User1520731567 posted

    Hi erum,

    According to your code,I try to test,but I can't reproduce your click event and drop down,like the picture:

    So,I modify your code and you could refer to the below code:

    <style type="text/css">
        .glyphicon-arrow-down:before {
             !important;
        }
    </style>
    <html>
    
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <script>
            $(function () {
                $("#ddlitemvalue").change(function (e) {
                    //alert($(this).html())
    
                    //  $('#topdivselect').find('span').text($(this).html())
                    $('span:first', "#topdivselect").text($("option:selected", this)[0].innerHTML)
                })
    
            })
        </script>
    </head>
    
    <body>
    
        <div id="mainddl">
            <div id="topdivselect" style="background-color:#beb1b1;width: 20rem;;padding-bottom: 0.3rem;">
                <p>
                    <span style="text-align:left;width:10rem;"> Select Category</span>
                    <span style="text-align:right;width:8rem;;right:20px;" class="glyphicon glyphicon-arrow-down"></span>
                </p>
            </div>
            <select id="ddlitemvalue" style="border-style: groove;width: 20rem">
            <option>one</option>
            <option>two</option>
            <option>three</option>
            </select>
        </div>
    </body>
    </html>

    How it works:

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 22, 2019 8:02 AM

All replies

  • User1520731567 posted

    Hi erum,

    According to your code,I try to test,but I can't reproduce your click event and drop down,like the picture:

    So,I modify your code and you could refer to the below code:

    <style type="text/css">
        .glyphicon-arrow-down:before {
             !important;
        }
    </style>
    <html>
    
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
        <script>
            $(function () {
                $("#ddlitemvalue").change(function (e) {
                    //alert($(this).html())
    
                    //  $('#topdivselect').find('span').text($(this).html())
                    $('span:first', "#topdivselect").text($("option:selected", this)[0].innerHTML)
                })
    
            })
        </script>
    </head>
    
    <body>
    
        <div id="mainddl">
            <div id="topdivselect" style="background-color:#beb1b1;width: 20rem;;padding-bottom: 0.3rem;">
                <p>
                    <span style="text-align:left;width:10rem;"> Select Category</span>
                    <span style="text-align:right;width:8rem;;right:20px;" class="glyphicon glyphicon-arrow-down"></span>
                </p>
            </div>
            <select id="ddlitemvalue" style="border-style: groove;width: 20rem">
            <option>one</option>
            <option>two</option>
            <option>three</option>
            </select>
        </div>
    </body>
    </html>

    How it works:

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 22, 2019 8:02 AM
  • User81789783 posted

    i have below code and it gives error

    TypeError: $(...)[0] is undefined

     $(".ddlitemvalue").click(function (e) {
                    alert($(this).html())
    
                
                    $('span:first', "#topdivselect").text($("option:selected", $(this))[0].innerHTML)
                })

    Sunday, March 24, 2019 11:51 AM
  • User1520731567 posted

    Hi erum,

    i have below code and it gives error

    TypeError: $(...)[0] is undefined

     $(".ddlitemvalue").click(function (e) {
                    alert($(this).html())
    
                
                    $('span:first', "#topdivselect").text($("option:selected", $(this))[0].innerHTML)
                })

    I replaced your line of code and it worked fine.

    I am confused about why you made a mistake.

    If your code is different from mine,please post your code,so that I can reproduce your issue.

    And I suggest you could open F12 developer tool to add breakpoints to check your code.

    Best Regards.

    Yuki Tao

    Monday, March 25, 2019 7:07 AM