Search code examples
cssangulartwitter-bootstrap-3ng-bootstraptypehead

ng-bootstrap Open on focus input field css not working


I have used ng Typeahead Open on focus input , my conflict is that they are using bootstrap-4 but I have used bootstrap 3 for my project , bootstrap 3 for that Open on focus is not working properly ,any one know how to make that work on bootstrap 3?

html

<input
  id="typeahead-focus"
  type="text"
  class="form-control"
  [(ngModel)]="model"
  [ngbTypeahead]="search"
  (focus)="focus$.next($event.target.value)"
  (click)="click$.next($event.target.value)"
  #instance="ngbTypeahead"
/>

stackblitz code here


Solution

  • Just add below css in your style.css and your item will shown good as example :

    .dropdown-item {
    	display: block;
    	width: 100%;
    	padding: .25rem 1.5rem;
    	clear: both;
    	font-weight: 400;
    	color: #212529;
    	text-align: inherit;
    	white-space: nowrap;
    	background-color: transparent;
    	border: 0
    }
    
    .dropdown-item:focus,
    .dropdown-item:hover {
    	color: #16181b;
    	text-decoration: none;
    	background-color: #f8f9fa
    }
    
    .dropdown-item.active,
    .dropdown-item:active {
    	color: #fff;
    	text-decoration: none;
    	background-color: #007bff
    }
    
    .dropdown-item.disabled,
    .dropdown-item:disabled {
    	color: #6c757d;
    	background-color: transparent
    }
    
    .dropdown-menu.show {
    	display: block
    }
    
    .dropdown-header {
    	display: block;
    	padding: .5rem 1.5rem;
    	margin-bottom: 0;
    	font-size: .875rem;
    	color: #6c757d;
    	white-space: nowrap
    }