0

I have a problem with my dropdown.When I am clicking the dropdown menu button it got opened but when I click on it again the menu gonna moving down and sometimes it is also not able to close my drop down here goes my html code:

<div class="col-md-4 dropdown"><h2 class="dd_text">Vegetables</h2>
                    <div class="btn-group" id="mydropdown">
                        <button style="font-size:24px" class="btn btn-light btn-secondary" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img align="left" src="vegetables.jpg" class="image_on_dd"></img></button>
                            <div class="dropdown-menu force-scroll" aria-labelledby="dropdownMenuButton">
                                <label class="pure-material-checkbox">
                                <input type="checkbox" name="brinjal" value="brinjal"/><span>Brinjal</span></label>
                                <label class="pure-material-checkbox">
                                <input type="checkbox" name="potato" value="potato"/><span>Potato</span></label>
                                <label class="pure-material-checkbox">
                                <input type="checkbox" name="tomato" value="tomato"/><span>Tomato</span></label>
                                <label class="pure-material-checkbox">
                                <input type="checkbox" name="capsicum" value="capsicum"/><span>Capsicum</span></label>
                                <label class="pure-material-checkbox">
                                <input type="checkbox" name="onion" value="onion"/><span>Onion</span></label>

Here is my css code:

       .btn{
          margin-left:30px;
          background: white;
          border-color:white;
          width:300px;
          }

        .btn:hover{
          background: white;
          border-color:white;
          /*border-bottom-color: gray;*/
         }

        .dropdown {
                position: relative;
                display: inline-block;
                }
        .dropdown-menu{
            width:100%;
        }

        .force-scroll{
          overflow-y: scroll;
          width:300px;
         }

         .dropdown-menu{
            transform: translate3d(0px, 85px, 0px)!important;
            }

Here is the result: Dropdown Issue

So now I wanted my dropdown should get closed when I double click on the button and get opened when I click once.Is that possible.If?Will anybody help me out?

user14
  • 37
  • 7

1 Answers1

1

Your HTML code is invalid and there are multiple dead rules in your CSS to start with. Additionally there are some bad practices, for example you wouldn't use Bootstrap button like you did when implementing an icon as a button.

Attached is a jsfiddle with working and cleaned up code. click here

<div class="col-md-4 dropdown">
<h2 class="dd_text">Vegetables</h2>
<div class="btn-group" id="mydropdown">

<!-- toggle dropdown button -->
<button class="btn btn-light" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  <img src="https://cdn4.iconfinder.com/data/icons/miscellaneous-81-solid/128/salad_vegetable_plate_leaf_menu_diet_healthy_editable_food_fresh_fruits_green_-512.png" width="30" height="30" alt="vegetable">
</button>

<!-- dropdown menu -->
<div class="dropdown-menu force-scroll" aria-labelledby="dropdownMenuButton">
  <label class="pure-material-checkbox">
    <input type="checkbox" name="brinjal" value="brinjal" /><span>Brinjal</span>
  </label>
  <label class="pure-material-checkbox">
    <input type="checkbox" name="potato" value="potato" /><span>Potato</span>
  </label>
  <label class="pure-material-checkbox">
    <input type="checkbox" name="tomato" value="tomato" /><span>Tomato</span>
  </label>
  <label class="pure-material-checkbox">
    <input type="checkbox" name="capsicum" value="capsicum" /><span>Capsicum</span>
  </label>
  <label class="pure-material-checkbox">
    <input type="checkbox" name="onion" value="onion" /><span>Onion</span>
  </label>
</div>

Using double click in web is something i would not recommend, since double-clicking is usually used to select text/paragraphs. If you want to implement it either way there is a solution here.

noahshotz
  • 57
  • 6