keeping search fixed in a dropdown menu - html

Question

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/

Answer 1

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'> {{item.name}}
</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;
}

Answer 2

you can add a new css class where you fix high and you overflow-y property to scroll:
.anyClass {
height:150px !important;
overflow-y: scroll !important;
}
In your HTML code, for example you will have something like that:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton01" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
</button>
<ul (click)="$event.stopPropagation()" class="dropdown-menu" aria-labelledby="dropdownMenuButton01">
<li>
<input type="text" class="form-control" placeholder="Search">
</li>
<div class="anyClass" >
<app-item-component *ngFor="let item of array"></app-item-component>
</div>
</ul>
</div>
The (click)="$event.stopPropagation()" I added just to stop closing the select window after picking an item.