keeping search fixed in a dropdown menu

Issue

I created a dropdown menu with search option in angular JS. when i click on it, a dropdown menu with search option comes. But as i scroll down, search also becomes a part of scroll. I want it to be fixed and placed at position where i clicked.

Here is the code for the dropdown menu.

<div class="dropdown dropdown-scroll" style="margin-top:15px;" >

<button style="width:220px;" class="btn btn-primary  dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
   {selected.ApplicationName}}
</button>
<ul class="dropdown-menu" role="menu">
      <li role="presentation">
            <div class="input-group input-group-sm search-control" fixed>
                 <span class="input-group-addon">
                       <span class="glyphicon glyphicon-search"></span>
                  </span>
                  <input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
            </div>
      </li>

      <li  role="presentation" ng-repeat='app in applicationArray | filter:query'>
           <a ng-click="changeSelected(app)"> {{app.ApplicationName}} </a>
      </li>


</ul>
</div>

The output is like this :

Now as i scroll, this search goes up and i cant see it anymore. Also, when i click on *select an application, i want the dropdown to be placed at that location where *select an application is there.

Try this fiddle http://jsfiddle.net/kyrcha/ULSy3/6/

Solution

try this one

use navbar-fixed-top class with your search li

<li role="presentation" class="navbar-fixed-top">
            <div class="input-group input-group-sm search-control" fixed>
                 <span class="input-group-addon">
                       <span class="glyphicon glyphicon-search"></span>
                  </span>
                  <input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
            </div>
      </li>

EDIT CODE :

I have updated fiddle.Please check it.

HTML :

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1 "  ng-controller="ListCtrl">
          <li><div class=" fixed-class input-group input-group-sm search-control "> <span class="input-group-addon ">
                    <span class="glyphicon glyphicon-search"></span>
</span>
                <input type="text" class="form-control" placeholder="Query" ng-model="query"></input>
            </div>
        </li>
         <ul class="presentation-li">
        <li role="presentation" ng-repeat='item in items | filter:query'> <a href="#"> {{item.name}} </a>
             </li>
        </ul>



    </ul>

CSS:

ul.presentation-li li{
    list-style: none;    
}
ul.presentation-li li a{
    color: black;
    text-decoration: none;
}

.fixed-class{
    position: fixed;
    border-width: 0 0 1px;
    width : 141px;
    top: 37px;
    bottom : 35px;
    background-color: white;

}

Answered By - RIYAJ KHAN