I've been struggling with customizing the Bootstrap UI Typeahead component. I am attempting to dynamically adjust the width of the dropdown box. The solution provided in the previous Stack Overflow question I asked worked in a different context, but for some reason, it doesn't seem to work with the Typeahead directive. Currently, I have integrated the Typeahead component into my own directive, which is defined as follows:
.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'));
};
}
};
});
The content of my-directive.html is as follows:
<div style="width:100%;">
<span>{{showLinks}}</span> <!-- renders correctly -->
<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}} <!-- does not render -->
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span>
</script>
</div>
Is there a way to dynamically adjust the width of the dropdown menu to match the width of the textbox in my directive? The size of the textbox varies on different screens, so I cannot simply hard-code a fixed value.