ng-grid stiding bootstrap style downdowns

Question

Я обновляю форму таблицы. Каждая строка в таблице имеет несколько элементов, включая два выпадающих списка в отдельных столбцах для каждой строки. Я обновил таблицу до ng-grid и обновил выпадающие списки из простых виджетах в стиле bootstrap drop-down elements, чтобы соответствовать другим на сайте. Существенная проблема, которую я испытываю, заключается в том, что макет CSS ng-grid приводит к тому, что фактическое выпадающее меню будет помещено за ячейку ниже, и поэтому не видно. Изучение элементов показывает, что они фактически отображаются, имеют правильную высоту, ширину и содержание, но просто отображаются за содержимым в другой ячейке. Я попытался отключить переполнение CSS: скрытый в желаемых ячейках, но похоже, что это свойство также установлено для всей сетки, и отключить его на этом уровне полностью нарушает макет сетки. У меня есть рабочий обход, но он заставляет меня принять душ, и я уверен, что есть более элегантный способ сделать это:

1) поместил шаблон ячейки только для видимой части, включая ng- нажмите проходящий вызов колонна (CoffeeScript):

{field: "type", 
    displayName: "Type", 
    width: 155, 
    original_width: 155, 
    pinned: false, 
    cellClass: "type_col", 
    headerClass: "type_col", 
    cellTemplate: """<div ng-click="editor.activeCol(col)" class="btn-group"> 
    <button ng-show="row.entity[col.field]" style="width: 125px" 
    class="btn dropdown-toggle blk-txt" href="#"> 
    {{row.entity[col.field]}}</button><button class="btn"> 
    <span class="caret"></span></button></div>""" 
    }, 

2) Поставьте выберите строку обратный вызов к другому методу:

multiSelect: false, 
    enableRowSelection: true, 
    afterSelectionChange: angular.bind(@, selectFunc), 

3) иметь совершенно отдельный угловой шаблон из вариантов раскрывающихся что классифицируется как всегда отображаемый открытый для бутстрапа, но имеет как ng-show, так и ng-styl е элементы, чтобы мой код, чтобы изменить его видимость и точное местоположение:

<div ng-show="editor.utilization" ng-style="editor.dropdown_style"> 
<div class="btn-group editor-widget open"> 
<ul class="dropdown-menu"> 
<li ng-click="editor.selectUtil('heavy')"><a href="#">Heavy</a></li> 
<li ng-click="editor.selectUtil('medium')"><a href="#">Medium</a></li> 
<li ng-click="editor.selectUtil('light')"><a href="#">Light</a></li> 
</ul> 
</div> 
</div> 

Когда пользователь нажимает на (кажущемся) падение вниз, происходит следующее:

1) нг щелкните событие доставляет столбец к классу, это хранится

2) строки выбор (afterSelectionChange) обратный вызов триггера со строкой и имеет возможность получить столбец из предыдущего вызова, с обеими строками и столбцами теперь мы знаем реальную ячейку

3) Точная позиция экрана o f ячейка, о которой идет речь, захватывается, и шаблон выпадающего выбора становится видимым непосредственно под нажатой ячейкой, создавая иллюзию нормальной выпадающей операции.

Это длинное объяснение, но я хотел бы дать фон тому, что я пробовал, чтобы показать, что я ищу более простой (надеюсь, намного более простой) способ просто включить стилизованные выпадающие виджеты в виде ng-grid клетки. Вся суть этого проекта заключается в том, чтобы стилизовать и украсить уже рабочие формы, поэтому решения, которые работают только путем резки стиля для чистой функциональности, на самом деле не служат цели.

Answer 1

Вот как я решил это. У меня есть ячейка в ng-сетке, и в ячейке у меня есть стрелка глификона. Когда я нажимаю на нее, я хочу, чтобы выпадающий переключатель показывался. С CSS я получил то, что хотел. Тем не менее, у меня много клеток со стрелками, и поэтому мне пришлось динамически менять «css-стиль». Я делаю это с помощью своего javascript.

Надеюсь, это поможет!

Cell Шаблон:

<div class="ngCellText" ng-class="col.colIndex()" class="dropdown"> 
    <span ng-cell-text>{{row.getProperty(col.field)}}</span> 
    <a class="dropdown-toggle" ng-click="setXchords($event)"> 
    <i class="glyphicon glyphicon-chevron-down"></i> 
    </a> 
    <ul class="dropdown-menu"> 
    <li ng-repeat="choice in editableItems"> 
     <a>{{choice}}</a> 
    </li> 
    </ul> 
</div> 

CSS:

.dropdown-menu { 
    position: fixed; 
    top: inherit; 
    left: 85px; 
} 

JavaScript:

$scope.setXchords = function(e) { 
    var elem = angular.element(e.currentTarget); 
    $(elem).next().css('left', e.clientX).css('top', e.clientY); 
}; 

Answer 2

Для того, чтобы показать регулярное выпадающие, я добавил этот CSS:

.ngCell { overflow: visible; } 

Для того, чтобы получить multiselects появляться, мне нужно добавить класс (я использовал «полевую Множественный») к editableCellTemplate, а затем добавьте следующий CSS к классу:

.field-multiselect { 
position: relative; 
overflow: visible; 
z-index: 888; } 

Это сработало для меня! (Наконец, после довольно много проб и ошибок!)