CODEWITHSUNDEEP
htmljquerycssdjangobootstrap-4
usef
usef

Reputation: 73

Dropdown is not showing HTML , CSS

I have the attr data-toggle= dropdown on the {{form.query}} which is the search input

but it just wont show, any solutions?

bootstrap/jquery links in head section :

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

JavaScript in body :

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

HTML code:

<form class="dropdown" method="get">
       <input type="text" name="query" class="form-control" placeholder="Type Here" data-toggle="dropdown" required id="id_query">
    
       <ul class="dropdown-menu col-12 pl-2" role="menu" aria-labelledby="menu" id="list" style="display:inline-block;">
          <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Django</a></li>
           <div class="dropdown-divider"></div>
           <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Potato</a></li>
           <div class="dropdown-divider"></div>
           <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Sleep</a></li>
       </ul> 
    
   <input type="submit" value="Search" class="btn btn-lg btn-primary col-12 my-2">                    
</form>

Upvotes: 2

Views: 890

Answers (2)

Yudiz Solutions
Yudiz Solutions

Reputation: 4459

Can you please check the below code link? Hope it will work for you. You have to add

id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" in input

and

aria-labelledby="dropdownMenuButton" in dropdown-menu

as per bootstrap documentation

Please refer to this link: https://jsfiddle.net/yudizsolutions/8fnw0o46/11/

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<form class="dropdown" method="get">
  <input type="text" name="query" class="form-control" placeholder="Type Here" data-toggle="dropdown" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false" required id="id_query">

  <ul class="dropdown-menu col-12 pl-2" role="menu" aria-labelledby="dropdownMenuButton" id="list">
    <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Django</a></li>
    <div class="dropdown-divider"></div>
    <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Potato</a></li>
    <div class="dropdown-divider"></div>
    <li role="presentation"> <a href="#" role="menuitem" tabindex="-1">Sleep</a></li>
  </ul>

  <input type="submit" value="Search" class="btn btn-lg btn-primary col-12 my-2">
</form>

Upvotes: 1

Arleigh Hix
Arleigh Hix

Reputation: 10897

You must use ether a link or a button to toggle the dropdown, not a text input.

Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs.

https://getbootstrap.com/docs/4.6/components/dropdowns/#examples

Upvotes: 0

Related Questions