Trouble with custom boostrap dropdown list

Question

I am trying to make a "dropdown" type effect with a list of inputs and a button for some functionality. Basically, there is a table, and then a list of 6 inputs that can filter the results on this table. I have the view complete and working correctly (although I stripped out the functionality for my fiddle).

I understand that I need to use a general layout of

<ul>
   <li>
      <div>
          <input/>
      <div>
   </li>
   <li>
      <div>
          <input/>
      </div>
   </li>
</ul>

Because a <div> must not go directly inside a <ul>

What am I doing wrong?

link to what i want to see after my dropdown is clicked

The dropdown will appear on top of the other content that's why it only makes sense to have it directly after the trigger, I think what you want to do is just add a hidden div and when the button is clicked you show it (toggle class hide). Or maybe have a look into bootstrap collapse. — maraca, Jul 30 '15 at 21:18
@maraca I do like what you are doing here, however the purpose here is to have the dropdown menu overlay the content, not push the content down the page. I think this makes doing a `show`/`hide` not practical here, and I'd prefer to use no javascript — USER_8675309, Jul 31 '15 at 12:41

vanburen · Answer 1 · 2015-07-31T15:20:11.323

This might help.

.menu-large {
  position: static !important;
  text-align: center;
}
.megamenu {
  padding: 20px 0px;
  width: 100%;
  border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
  <a class="navbar-brand" href="#">
    <img alt="Brand" src="http://placehold.it/15x15/f00" />
  </a>
  <a class="navbar-brand pull-right" href="#">
    <img alt="Brand" src="http://placehold.it/15x15/f00" />
  </a>

  <div class="navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown menu-large"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Stuff <span class="caret"></span></a>

        <ul class="dropdown-menu megamenu">
          <li>
            <div class="col-lg-12">
              <form>
                <div class="row">
                  <div class="col-sm-3">
                    <div class="form-group">
                      <input type="text" class="form-control" id="input1" placeholder="Input" />
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <input type="text" class="form-control" id="input2" placeholder="Input" />
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <input type="text" class="form-control" id="input3" placeholder="Input" />
                    </div>
                  </div>
                  <div class="col-md-3">
                    <div class="form-group">
                      <input type="text" class="form-control" id="input4" placeholder="Input" />
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-4">
                    <div class="form-group">
                      <select class="form-control">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <select class="form-control">
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="form-group">
                      <button type="button" class="btn btn-sm-update btn-primary ">UPDATE</button>
                      <button type="button" class="btn btn-sm-x btn-default transparent glyphicon glyphicon-remove"></button>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

the inputs and select lists should be inside the dropdown here — USER_8675309, Jul 31 '15 at 12:42
this is good -- I've got mine working as well thanks to all of you. +1 for updating it even after I accepted the answer — USER_8675309, Jul 31 '15 at 15:42

score 0 · Accepted Answer · answered Jul 30 '15 at 21:37

0

How about this?

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
    <div class="dropdown-menu">
        <!-- dropdown content -->
    </div>
</div>

of course, you can set dropdown-menu's width to whatever you desire.

answered Jul 30 '15 at 21:37

Deja Vu

721
1
8
17

I don't know why I felt that I needed to use a `
– USER_8675309 Jul 31 '15 at 12:43
when I click on the select list within the dropdown on your fiddle the dropdown closes – USER_8675309 Jul 31 '15 at 13:10
@USER_8675309 looks like you might need to use something like this http://stackoverflow.com/questions/9758587/twitter-bootstrap-multilevel-dropdown-menu – Deja Vu Jul 31 '15 at 20:00

Trouble with custom boostrap dropdown list

2 Answers2