Search code examples
javascriptangularjstwitter-bootstraptypeaheadangularjs-bootstrap

typeahead dropdown results align right - pull-right

Trying to understand how to implement the pull-right class within the angular typeahead dropdown only.

Issues:

  • input is located on RHS of window (which is typical for a search input box)
  • my results are wider then my input (and the containing div)
  • I need right side of dropdown to align with right side of input box, and to extend on the left past (below) the input width.
  • (dropdown only needs shifting, text alignment within doesn't change and should stay aligned to left. ie. Not an RTL as in this issue: RTL for angularjs bootstrap's typeahead)

Applying pull-right class to a containing div doesn't seem to affect the drop-down independently of the input.
I'm not sure where else to put it ?

Is there a CSS method of controlling the alignment of the dropdown div?

Have modified the documentation example in the following Plunker:

  • includes the pull-right class in the containing div
  • placed in a containing div to narrow the width (perhaps unnecessary ?)

If you type 'ang' into the plunker example inputbox you'll see the results spill past the right of the window.

  <div class='column'>
    <div class='container-fluid pull-right' ng-controller="TypeaheadCtrl">
      <h4>Asynchronous results</h4>
      <pre>Model: {{asyncSelected | json}}</pre>
      <input type="text" ng-model="asyncSelected" placeholder="Locations loaded via $http" typeahead="address for address in getLocation($viewValue)" typeahead-loading="loadingLocations" class="form-control">
      <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i>
    </div>
  </div>

I've looked at the following issues, which don't seem to help me:

Solution

  • You would need to override the inline-style that get generated for .drop-down-menu by typeahead. Something along the the lines of:

    <script>
  $('#myInput').on('keypup', function() {
    $(".dropdown-menu").css({ "left": "auto", "right": "10px" });
  });
</script>

    Plunker

    Note: set right to whatever the distance is between your input and the RHS of the page/window

    Update

    For a non-jQuery version you would have to override the left css attribute of .dropdown-menu using !important

    .dropdown-menu{
  left: auto !important;
  right:10px;
}

    Updated Plunker