CODEWITHSUNDEEP
javascripttwitter-bootstrapdrop-down-menu
crockpotveggies
crockpotveggies

Reputation: 13300

Change click behavior on Bootstrap3 dropdown button

Can't figure out how to properly change the click behavior on Bootstrap 3 dropdown menus. I'm basically using the dropdown as an ad-hoc input where users can type a name and then submit. However, if they click on the input text field it closes the dropdown before anything can be typed.

The goal is to only programatically close the dropdown, although it still requires the data-toggle attribute which is persisting the standard behavior.

dropdown with text field

Here's the code for the dropdown:

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <i class="fa fa-flask icon-3x"></i>
  </button>
  <ul class="dropdown-menu heatmap-options" role="menu">
    <li><label>Formula </label><input type="text" placeholder="type a formula name"  /></li>
    <li class="divider"></li>
    <li><a href="javascript:;" class="btn btn-primary btn-sm">Create</a></li>
  </ul>
</div>

I'm not sure whether I need to do some Javascript intervention, restructure this entirely, or if there's some "option" I don't know about that I can use for this. Appreciate the help!

Upvotes: 1

Views: 1114

Answers (1)

Karthikeyan
Karthikeyan

Reputation: 323

You have to add some scripts before the body tag as shown bellow. 

 <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>DropDown with Input Fields</title>
      <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">
      <link rel="stylesheet" href="assets/css/font-awesome.css" />
     </head>
     <body>
      <div class="btn-group">
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-flask icon-3x"></i></button>
        <ul class="dropdown-menu" role="menu">
          <li>
            <div class="input-group">
             <input type="text" class="form-control">
             <span class="input-group-btn">
             <button class="btn btn-default" type="button">Go!</button>
             </span>
            </div>      
         </li>
        </ul>
      </div>
     <script src="assets/js/jquery.js"></script>
     <script type="text/javascript" src="assets/js/bootstrap.js"></script>
     <script type="text/javascript">
      $('.dropdown-menu').on('click', function (e) {
       e.stopPropagation() 
      })
     </script>
     </body>  
    </html>

Upvotes: 1

Related Questions