Setting Width of Typeahead Drop Down in AngularJS project

Question

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 width of elements at runtime. While answered properly, the answer does not work in the context of the Typeahead directive for some reason. Currently, I am using the Typeahead control in my own directive, which is defined like this:

.directive('myDirective', function () {
  return {
    restrict:'E',
    transclude: true,
    scope: {
      showLinks: '=?',
      query: '='
    },
    templateUrl: '/directives/my-directive.html',
    controller: function ($scope) {
      if (angular.isUndefined($scope.showLinks)) {
        $scope.showLinks = true;
      }

      $scope.getLocation = function(l) {
    var searchField = element.find('input');
        var width = searchField[0].offsetWidth;

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

my-directive.html looks like this:

<div style="width:100%;">
    <span>{{showLinks}}</span> <!-- renders just fine -->
    <input type="text" autofocus autocomplete="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" />
    <script type="text/ng-template" id="location.html">
      {{showLinks}} <!-- Never renders -->
      <span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
    </script>
</div>

How do I set the width of the dropdown menu that appears to be the same width as the textbox in my directive? My textbox is a different size on different screens. That's why I do not just hard-code a value.

I had raised a similar question relating to customizing the typeahead dropdown. stackoverflow.com/questions/25116635/… Solved by following the template approach (Accepted answer). You may have a look once, it may help you. — Pramod Karandikar
– Pramod Karandikar, Commented Oct 9, 2014 at 12:44
@Pam I might be missing something. However, when I use the plunker from the accepted answer, the drop down list is not the same width as the text box. In addition, I do not see the question referring to the width of the drop down list. Am I missing something? — user70192
– user70192, Commented Oct 9, 2014 at 13:01

Justin Alexander · Accepted Answer · 2014-12-31 12:36:08Z

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" +
    "");
}]);

Community · Accepted Answer · 2017-05-23 11:53:35Z

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.

<div style="width:100%;">
    <span>{{showLinks}}</span> <!-- renders just fine -->
    <input type="text" autofocus autocomplete="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" />
    <script type="text/ng-template" id="location.html">
      <div style="width:800px;">{{showLinks}}</div>
      <a>
        <span ng-bind-html="match.label | typeaheadHighlight:query"></span>
      </a>
    </script>
</div>

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Oct 9, 2014 at 18:02

Pramod Karandikar

5,3377 gold badges45 silver badges75 bronze badges

1 Comment

user1438038 Over a year ago

In case you face an error "Unknown provider: typeaheadHighlightFilterProvider <- typeaheadHighlightFilter" with the above solution, replace typeaheadHighlight with uibTypeaheadHighlight. I suppose, the property was renamed in later releases.

Andrew Irvine · Accepted Answer · 2016-03-16 11:33:44Z

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">
<i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noResults">
  <i class="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'));
  }
});

Rajeev · Accepted Answer · 2018-08-06 12:27:28Z

0

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

<div style="position: relative;" class="drp">
    <input type="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,

answered Aug 6, 2018 at 12:27

Rajeev

4055 silver badges10 bronze badges

1 Comment

Rajeev Over a year ago

Collectives™ on Stack Overflow

Setting Width of Typeahead Drop Down in AngularJS project

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related