результаты выпадающего списка typeahead выравниваются вправо - потяните вправо

Попытка понять, как реализовать класс pull-right только в раскрывающемся списке углового типа.

Проблемы:

  • ввод расположен справа от окна (что типично для поля ввода поиска)
  • мои результаты шире, чем мой ввод (и содержащий div)
  • Мне нужно, чтобы правая часть раскрывающегося списка выравнивалась с правой стороной поля ввода и расширялась слева (ниже) от ширины ввода.
  • (выпадающий список требует только сдвига, выравнивание текста внутри не меняется и должно оставаться выровненным по левому краю. т.е. не RTL, как в этом выпуске: RTL для начальный тип начальной загрузки angularjs)

Применение класса pull-right к содержащему div, похоже, не влияет на раскрывающийся список независимо от ввода.
Я не уверен, куда еще его поместить?

Есть ли метод CSS для управления выравниванием выпадающего div?

Изменили пример документации в следующем Plunker:

  • включает класс pull-right в содержащий div
  • помещается в содержащий div, чтобы сузить ширину (возможно, ненужную?)

Если вы введете 'ang' в поле ввода примера plunker, вы увидите, что результаты выходят за правую часть окна.

  <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>

Я рассмотрел следующие проблемы, которые, похоже, мне не помогают:


javascript angularjs twitter-bootstrap typeahead angularjs-bootstrap
person Ben    schedule 31.03.2015    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Вам нужно будет переопределить встроенный стиль, созданный для .drop-down-menu с помощью typeahead. Что-то в духе:

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

Планкер

Примечание: установите right на любое расстояние между вашим input и правой стороной страницы/окна.

Обновить

Для версии, отличной от jQuery, вам придется переопределить атрибут left css для .dropdown-menu, используя !important

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

Обновлен плункер

person Michael Doye    schedule 31.03.2015
comment
спасибо @M.Doye - похоже на хорошее решение - будет ли это работать в чистой среде angularjs? (в настоящее время у нас нет jquery в приложении). Я предполагаю, что это потребует какой-то директивы? - person Ben; 02.04.2015
comment
@Ben, ты мог бы сделать это, используя только CSS, но тебе пришлось бы использовать !important. обновили мой ответ, а также плункер - person Michael Doye; 02.04.2015
comment
выглядит неплохо ! изменил ваш плункер, показав ваше решение CSS с двумя разными полями ввода и различным выравниванием результатов 3arh1IOcKFQoNsqG5hwM?p=предварительная версия - person Ben; 02.04.2015
comment
Теперь вы можете иметь его на любой стороне страницы :-) - person Michael Doye; 02.04.2015

arrow_upward
1
arrow_downward

Другой вариант — использовать хук typeahead-popup-template-url с небольшими изменениями в реализации шаблона по умолчанию.

Используя этот подход, вы можете использовать более одного экземпляра ui-typeahead, определяя желаемый макет один за другим.

Не забудьте настроить длину right для вашего конкретного использования.

(function () {
	'use strict';

  angular.module('myAnswer', ['ui.bootstrap']);
  
})();
<html ng-app="myAnswer">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
  <div class='container-fluid'>

    <h4>Static arrays</h4>
    <pre>Model: {{selected | json}}</pre>
    
<script type="text/ng-template" id="typeahead-popup-right.html">
  <ul class="dropdown-menu" ng-show="isOpen() && !moveInProgress" ng-style="{top: position().top+'px',left: 'auto', right: '15px'}" role="listbox" aria-hidden="{{!isOpen()}}">
    <li class="uib-typeahead-match" ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index, $event)" role="option" id="{{::match.id}}">
      <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
    </li>
  </ul>
</script>    
    
    
    <input type="text" ng-model="selected" uib-typeahead="state for state in ['Espirito Santo', 'Minhas Gerais', 'Rio de Janeiro', 'São Paulo'] | filter:$viewValue" class="form-control" typeahead-popup-template-url="typeahead-popup-right.html">
    <small class="help-block">Try typing 'Rio' or 'Janeiro'</small>
  </div>
  </body>
</html>

person Bernardo Baumblatt    schedule 10.05.2017
comment
Насколько я понимаю, это должен быть принятый ответ. Одним из улучшений будет вычисление правильного положения. Если мы получим ширину страницы в контроллере, например так: $scope.windowWidth = document.documentElement.clientWidth. Затем мы можем вычислить правильную позицию следующим образом: right: $parent.windowWidth - position().left - position().width+'px'}" - person Fonnae; 03.06.2021