代码之家 › 专栏 › 技术社区 › jjharrison

柔性箱行内Ag网格高度

ag-grid flexbox css html

jjharrison · 技术社区 · 6 年前

我在Internet Explorer中无法正确配置ag网格高度。它在镀铬和边缘方面都工作良好。

<div class="row search-result-row">
    <div class="col">
        <div class="card h-100">
            <div class="card-block h-100">

                <ag-grid-aurelia #agGrid class="ag-bootstrap"
                         style="width: 100%; height: 100%;"
                         grid-options.bind="gridOptions"
                         column-defs.bind="columnDefs">
                </ag-grid-aurelia>
                
            </div>
        </div>
    </div>
</div>

具有的外部div class=“行搜索结果行” 包含 弹性增长:1 扩展行高以填充剩余屏幕空间的css类。然后是带有h-100 CSS类的引导卡,用于设置100%的高度。

我遇到的问题是ag电网。在chrome和edge中,在网格上设置100%的高度将按预期填充div,但是Internet explorer中的行为非常不同。它似乎位于ag网格和顶层行div上不断扩展的高度循环中,导致两个不断扩展的滚动条。

如果我在网格或一个外部div上显式设置高度,我可以避免这种行为,但这不是我需要的。在渲染具有高度的ag网格时,是否存在已知问题或我缺少的东西:100%位于flex grow行和其他几个div中 height : 100% .

请参阅这个plunkr以了解我在IE中遇到的问题。我明确添加了css以显示引导类正在添加什么。 https://plnkr.co/edit/csEfhyrhQLjI196c1cER?p=preview

1 回复 | 直到 4 年前

Asons Oliver Joseph Ash 6 年前

IE需要 flex: 1 而不是 flex-grow: 1 ,简单地说, 无论内容大小,占用剩余空间

我还为Firefox添加了一个修复程序,如果您想要一个很好的解释,可以在这里阅读更多内容:

Why don't flex items shrink past content size?

.second-row{
  flex: 1;                     /*  changed, fix for IE  */
  min-height: 0;               /*  added, fix for Firefox  */
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
}

堆栈代码段

// this example has items declared globally. bad javascript. but keeps the example simple.

var columnDefs = [
    {headerName: "Date", 
    field: "date",
    cellRenderer : function(params) {
      console.log('inside cell renderer, got ' + Object.prototype.toString.call(params.value));
      return params.value.toLocaleString();
    },
    filter: 'set',
    filterParams : {
      cellRenderer : function(params) {
        console.log('inside filter cell renderer, got ' + Object.prototype.toString.call(params.value));
        return params.value.toLocaleString();
      }
    }
    }
];

var rowData = [
    {date: new Date('2015-11-10T23:15:02.904Z')},
    {date: new Date('2015-09-02T12:15:02.904Z')},
    {date: new Date('2015-11-10T23:15:02.904Z')},
        {date: new Date('2015-11-10T23:15:02.904Z')},
    {date: new Date('2015-09-02T12:15:02.904Z')},
    {date: new Date('2015-11-10T23:15:02.904Z')},
        {date: new Date('2015-11-10T23:15:02.904Z')},
    {date: new Date('2015-09-02T12:15:02.904Z')},
    {date: new Date('2015-11-10T23:15:02.904Z')},
        {date: new Date('2015-11-10T23:15:02.904Z')},
    {date: new Date('2015-09-02T12:15:02.904Z')},
    {date: new Date('2015-11-10T23:15:02.904Z')},
        {date: new Date('2015-11-10T23:15:02.904Z')},
    {date: new Date('2015-09-02T12:15:02.904Z')},
    {date: new Date('2015-11-10T23:15:02.904Z')},
        {date: new Date('2015-11-10T23:15:02.904Z')},
    {date: new Date('2015-09-02T12:15:02.904Z')},
    {date: new Date('2015-11-10T23:15:02.904Z')},
        {date: new Date('2015-11-10T23:15:02.904Z')},
    {date: new Date('2015-09-02T12:15:02.904Z')},
    {date: new Date('2015-11-10T23:15:02.904Z')},
        {date: new Date('2015-11-10T23:15:02.904Z')},
    {date: new Date('2015-09-02T12:15:02.904Z')},
    {date: new Date('2015-11-10T23:15:02.904Z')},
        {date: new Date('2015-11-10T23:15:02.904Z')},
    {date: new Date('2015-09-02T12:15:02.904Z')},
    {date: new Date('2015-11-10T23:15:02.904Z')},
        {date: new Date('2015-11-10T23:15:02.904Z')},
    {date: new Date('2015-09-02T12:15:02.904Z')},
    {date: new Date('2015-11-10T23:15:02.904Z')},
        {date: new Date('2015-11-10T23:15:02.904Z')},
    {date: new Date('2015-09-02T12:15:02.904Z')},
    {date: new Date('2015-11-10T23:15:02.904Z')},
        {date: new Date('2015-11-10T23:15:02.904Z')},
    {date: new Date('2015-09-02T12:15:02.904Z')},
    {date: new Date('2015-11-10T23:15:02.904Z')},
        {date: new Date('2015-11-10T23:15:02.904Z')},
    {date: new Date('2015-09-02T12:15:02.904Z')},
    {date: new Date('2015-11-10T23:15:02.904Z')},
        {date: new Date('2015-11-10T23:15:02.904Z')},
    {date: new Date('2015-09-02T12:15:02.904Z')},
    {date: new Date('2015-11-10T23:15:02.904Z')}
    
];

var gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    enableColResize: true,
    enableFilter: true
};


// wait for the document to be loaded, otherwise
// ag-Grid will not find the div in the document.
document.addEventListener("DOMContentLoaded", function() {
    // angularGrid is a global function
    agGridGlobalFunc('#myGrid', gridOptions);
    gridOptions.api.sizeColumnsToFit();

});

/* Put your css in here */

html{
  height: 100%;;
  width: 100%;
}

body{
  height: 100%;
}

h1 {
  color: red;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link data-require="bootstrap-css@4.0.0-alpha.4" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/2.3.5/ag-grid.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/2.3.5/ag-grid.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ag-grid/2.3.5/theme-fresh.css" />
    <style>
    
    #container{
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    
    .first-row{
      background-color: blue;
      /*flex-grow: 0;                  default, not needed  */
      display: flex;
      margin-left: -15px;
      margin-right: -15px;
    }
    
    .second-row{
      flex: 1;                     /*  added, fix for IE  */
      min-height: 0;               /*  added, fix for Firefox  */
      display: flex;
      margin-left: -15px;
      margin-right: -15px;
    }
    
    .col{
      flex-basis: 0;
      flex-grow:1;
      max-width: 100%;
      padding-left: 15px;
      padding-right: 15px;
      position: relative;
    }
    
    .card{
      position: relative;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      min-width: 0;
      word-wrap: break-word;
      background-color: #fff;
      background-clip: border-box;
      border: 1px solid rgba(0, 0, 0, 0.125);
      border-radius: 0.25rem;
    }
    
    
    
    .h-100{
      height: 100%;
    }
  
    </style>
  </head>

  <body>
    <!-- Put your html here! -->
    <div id="container">
      <div class="row first-row">
        <div class="col">
          <div class="card h-100">
            <div class="card-block">
              This is the card
              This is the card
              This is the card
              This is the card
            </div>
          </div>
         </div>
         
      </div>
      <div class="row second-row">
        <div class="col">
          <div class="card h-100">
            <div class="card-block h-100">
              <div id="myGrid" style="height:100%;" class="ag-fresh"></div> 
            </div>
             
           </div>
         </div>
      </div>
      
    </div>
    
  </body>

</html>