Setting Width Of Typeahead Drop Down In Angularjs Project

I've been wrestling with the Bootstrap UI Typeahead control. I am trying to set the width of the drop down box at run time. The last SO question I asked dealt with setting the widt

Solution 1:

An interesting side effect of how the typeahead directive position works, let's you do this with a simple template overwrite. The active difference is: ", width: position.width+'px'"

of course the effect is global.

angular.module("template/typeahead/typeahead-popup.html").run(["$templateCache", function($templateCache) {
  $templateCache.put("template/typeahead/typeahead-popup.html",
    "<ul class=\"dropdown-menu\" ng-show=\"isOpen()\" ng-style=\"{top: position.top+'px', left: position.left+'px', width: position.width+'px'}\" style=\"display: block;\" role=\"listbox\" aria-hidden=\"{{!isOpen()}}\">\n"+"    <li ng-repeat=\"match in matches track by $index\" ng-class=\"{active: isActive($index) }\" ng-mouseenter=\"selectActive($index)\" ng-click=\"selectMatch($index)\" role=\"option\" id=\"{{match.id}}\">\n"+"        <div typeahead-match index=\"$index\" match=\"match\" query=\"query\" template-url=\"templateUrl\"></div>\n"+"    </li>\n"+"</ul>\n"+"");
}]);

Solution 2:

Referring to the answer to this SO question, you can try to wrap the results inside a div and then assign the required width to it. Just to illustrate, have set the width of the div to 800px.

<divstyle="width:100%;"><span>{{showLinks}}</span><!-- renders just fine --><inputtype="text"autofocusautocomplete="off"class="form-control"ng-model="query"typeahead="option as option.Name for option in getLocation($viewValue)"typeahead-min-length="3"typeahead-template-url="location.html" /><scripttype="text/ng-template"id="location.html"><divstyle="width:800px;">{{showLinks}}</div><a><spanng-bind-html="match.label | typeaheadHighlight:query"></span></a></script></div>

Solution 3:

I managed to get it working by setting up a watcher on a variable assigned to typeahead-is-open.

In the directive template

<input type="text" ng-model="asyncSelected" placeholder="Type something" uib-typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" typeahead-no-results="noResults" typeahead-is-open="typeaheadIsOpen"class="form-control">
<ing-show="loadingLocations"class="glyphicon glyphicon-refresh"></i><divng-show="noResults"><iclass="glyphicon glyphicon-remove"></i> No Results Found
</div>

In the directive controller

$scope.$watch('typeaheadIsOpen', function(newVal, oldVal) {
  if (newVal == oldVal) {
    return;
  }
  if (newVal) {
    var searchField = angular.element.find('input');
    var width = searchField[0].offsetWidth;

    var dropdown = angular.element.find('.dropdown-menu');
    angular.element(dropdown[0]).css('width', (width + 'px'));
  }
});

Solution 4:

.drp.dropdown-menu{
    left: 8px!important;
	width: calc(100% - 15px);
  }

<divstyle="position: relative;"class="drp"><inputtype="text"ng-model="customSelected"placeholder="Custom template"uib-typeahead="state as state.Value for state in $ctrl.dimObj.Text | filter:{Value:$viewValue}"typeahead-template-url="customTemplate.html"class="form-control" ></div>

Angular js type head result set width same as input size,