ng-grid hiding bootstrap styled dropdowns

问题

I am upgrading a table form. Each row in the table has several elements, including two drop downs in specific columns for each row. I have upgraded the table to ng-grid and upgraded the drop-downs from plain select widgets to styled bootstrap drop-down elements to match the others on the site. The essential problem I am having is that the CSS layout of ng-grid causes the actual drop down menu to be put behind the cell below, and so not visible. Examining the elements shows that they are actually being rendered, have proper height, width and content, but are merely displayed behind the content in the other cell. I have tried disabling the CSS overflow: hidden on the desired cells, but it seems this property is also set for the entire grid and turning it off at that level totally breaks the grid layout. I have a working workaround, but it makes me want to take a shower and I am sure there is a more elegant way to do this:

1) put a cell template in for just the visible part, including an ng-click call passing 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) Put a select row callback to a different method:

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

3) Have a totally separate angular template of the drop-down options that is classed to always be shown open for bootstrap, but has both a ng-show and ng-style elements to allow my code to change its visibility and exact location:

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

When a user clicks on the (apparent) drop down, the following happens:

1) ng-click event delivers the column to the class, this is stored

2) row select (afterSelectionChange) callback triggers with the row and is able to get the column from the previous call, with both the row and column we now know the actual cell

3) The exact screen position of the cell in question is grabbed and the drop-down selections template is made visible directly below the clicked cell, making the illusion of a normal drop-down operation.

This is a long explanation, but wanted to give the background of what I have tried, to show that I am looking for a simpler (hopefully MUCH simpler) way to just include styled bootstrap drop-down widgets in ng-grid cells. The entire thrust of this project is to style and beautify already working forms so solutions that work only by cutting style for pure functionality don't really serve the purpose.

回答1:

This is how I solved it. I have a cell in the ng-grid and in the cell i have a glyphicon arrow down. When I click it I want the dropdown toggle to show. With the CSS I got what I wanted. However, I have many cells with arrows and thus I had to change the css-style "left" dynamically. I do this with my javascript.

Hope it helps!

Cell Template:

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

回答2:

In order to show regular dropdowns, I added this css:

.ngCell { overflow: visible; }

In order to get multiselects to appear, I needed to add a class (I used "field-multiselect") to an editableCellTemplate and then add the following css to the class:

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

This worked for me! (Finally, after quite a bit of trial and error!)

来源：https://stackoverflow.com/questions/20073481/ng-grid-hiding-bootstrap-styled-dropdowns

标签

angularjs

twitter-bootstrap

coffeescript

ng-grid