'How do I make a dropdown form in bootstrap?

Im trying to emulate facebook dropdown friend's request

Here's the example

enter image description here

My current attempt with bootstrap, for somehow the form appears to be really big

enter image description here

Here's the code

<ul class="dropdown-menu" id="friendsRequested">           
            <div class="container">
              <div class="row">
                <div class="col-xs-5">
                  <img src="/img/url" />
                  <li><a href="#">JackMoscovi</a></li>
                </div>
                <div class="col-xs-7">
                  <form action="" method="post" accept-charset="UTF-8">
                    <button>Accept</button>
                    <button>Decline</button>
                  </div>
                </form>
              </div>
            </div>
        </ul>
htmltwitter-bootstrapcss


Solution 1:[1]

here is a simple example i made on bootply for you. Note that it is just to show you how it works http://www.bootply.com/TM8SUpH9xr

And code here:

<div class="dropdown clearfix">      
   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;margin-bottom:5px;">
      <li><div class="container-fluid">
        <div class="row">
          <div class="col-md-2"><img src="//placehold.it/75x75"></div>
          <div class="col-md-2">Nullam sapien massa, aliquam in cursus ut, ullamcorper in tortor. 
Aliquam mauris arcu, tristique a lobortis vitae, condimentum feugiat justo.</div>
        </div>
      </div><a tabindex="-1" href="#">Action</a></li>
      <li class="divider"></li>
      <li><a tabindex="-1" href="#">Separated link</a></li>
    </ul>
  </div>

See the container, row and col placement? They are all inside ul and li as to be placed inside the dropdown. So use this example to fulfill your need.

Solution 2:[2]

Use this HTML in Your div 

          <li class="dropdown">
         <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown            

         <b class="caret"></b></a>
         <ul class="dropdown-menu">
           <li><a href="#"><form role="form">
<div class="form-group">
  <label for="sel1">Select list (select one):</label>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <br>
  <label for="sel2">Mutiple select list (hold shift to select more than one):</label>
  <select multiple class="form-control" id="sel2">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>


         </ul>
      </li>

Add add these funtions ro make Form 

        <head>
         <title>.....</title>
         <script type="text/javascript" src="http://code.jquery.com/jquery-  
         latest.js">        
        </script>
        <script type="text/javascript"     
        src="http://twitter.github.com/bootstrap/assets/js/bootstrap-
         dropdown.js">         
      </script>
       <script>
       $(document).ready(function()
        {
        //Handles menu drop down`enter code here`
        $('.dropdown-menu').find('form').click(function (e) {
           e.stopPropagation();
            });
          });
         </script>
          </head>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Atilla Arda Aç?kgöz
Solution 2 Saad Mirza

Related Questions