Adminlte: Search: add button dropdown won't display dropdown contents

[jrlooney]

In the search form, I've converted it to have a button dropdown so user can choose different type of search to perform. However, on clicking the button, the dropdown does not display (though I can see the "open" class being added to the unordered list). So I'm guessing there's something about the CSS on the form that is keeping the dropdown from appearing?

<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search Courses...">
<div class="input-group-btn">
<button type="button" class="btn btn-flat dropdown-toggle" data-toggle="dropdown" data-target="#searchType">
<i class="fa fa-search"></i><span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" id="searchType">
<li><a href="#">Courses</a></li>
<li><a href="#">Curriculum</a></li>
</ul>
</div>
</div>
</form>

[REJack]

If found it. 😄
First with your html code i doesn't get the dropdown, i needed to remove data-target="#searchType" from the button and then this lil css fixes the problem.

.sidebar-form{
  overflow: visible;
}

I hope this helps.

Example HTML:

<form action="#" method="get" class="sidebar-form">
  <div class="input-group">
    <input type="text" name="q" class="form-control" placeholder="Search Courses...">
    <div class="input-group-btn">
      <button type="button" class="btn btn-flat dropdown-toggle" data-toggle="dropdown">
        <i class="fa fa-search"></i> <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">Courses</a></li>
        <li><a href="#">Curriculum</a></li>
      </ul>
    </div>
  </div>
</form>

[jrlooney]

Bingo! Thanks for your help!

[REJack]

no problem 😃