Geek Answers Handbook

Ng-grid hid bootstrap in dropdown style

I am updating the table form. Each row in the table has several elements, including two drop-down lists in separate columns for each row. I updated the table to ng-grid and updated drop-down lists from simple widget elements to stylized boot elementsto match other site. The significant problem I'm experiencing is that the CSS ng-grid layout causes the actual drop down menu to be placed behind the cell below and therefore not visible. Studying the elements shows that they are actually displayed, have the correct height, width and content, but are simply displayed behind the contents in another cell. I tried disabling CSS overflow: hidden in the desired cells, but it looks like this property is also set for the entire grid, and disabling it at this level completely violates the grid layout. I have a workaround, but it makes me take a shower, and I'm sure there is a more elegant way to do this:

1) add the cell template for the visible part only, including the ng-click call passing through the column (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) angular , , , ng-show ng-style, :

<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) ng-click ,

2) callback (afterSelectionChange) , ,

3) , , .

, , , , ( , ) ng-grid, , , , , .

+3
2

. ng-, . , , . CSS , . , , "css-". javascript.

, !

:

<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);
};
+1

, css:

.ngCell { overflow: visible; }

, ( "multiselect" ) editableCellTemplate, css:

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

! (, !)

0

More articles:


All Articles