CODEWITHSUNDEEP
angularjsangular-ui-bootstrapangular-ui-typeahead
ArniReynir
ArniReynir

Reputation: 849

Open ui.boostrap typeahead dropdown up

I trying to open the typeahead boostrap-ui angular upwards.

Here is my code example:

index.html

 <div class="dropup" ng-controller="TypeaheadCtrl">
       <input type="text" ng-model="asyncSelected" placeholder="> Select issue" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" class="form-control inline-edit-form">
       <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
 </div>

app.js

app.controller('TypeaheadCtrl', function($scope, $http) {
        $scope.selected = undefined;
        $scope.getLocation = function (val) {
            return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
                params: {
                    address: val,
                    sensor: false
                }
            }).then(function (response) {
                return response.data.results.map(function (item) {
                    return item.formatted_address;
                });
            });
        };
    });

Because I have the "dropdown" at the bottom, how can I reverse the opening? enter image description here

Upvotes: 0

Views: 1641

Answers (2)

UshaP
UshaP

Reputation: 1291

Minor change i had to make (notice the class name is dropdown-menu and not dropup)

#txtSearch ul.dropdown-menu {
    bottom:100% !important;
    top:auto !important;
}

I had to #txtSearch simple because i have other dropdown-menu that needs to drop down.

Upvotes: 1

Blitz
Blitz

Reputation: 259

Had the same problem. Although it's not the most elegant solution this fixed it for me:

div.dropup ul {
    bottom:100% !important;
    top:auto !important;
}

Upvotes: 1

Related Questions