Ag-grid高度在flex-box行内

时间：2018-02-12 11:39:47

标签： html css3 flexbox ag-grid flex-grow

我无法在Internet Explorer中正确配置ag-grid高度。它在Chrome和Edge中都运行良好。

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

class =＆＃34; row search-result-row＆＃34; 的外部div包含一个扩展行高的 flex-grow：1 css类填补剩余的屏幕空间。然后是带有h-100 css类的bootstrap卡，设置高度为100％。

我遇到的问题是使用ag-grid。在chrome和edge设置中，网格上100％的高度按预期填充div，但Internet Explorer中的行为非常不同。它似乎是在ag-grid和顶级row div上连续循环扩展高度，导致两个不断扩展的滚动条。

如果我在网格或其中一个外部div上明确设置高度，我可以避免这种行为，但这不是我需要的。是否存在一个已知的问题，或者在渲染高度为ag-grid的情况下缺少的东西：在flex-grow行内100％和其他几个高度div：100％。

请参阅此plunkr以获取我在IE中的问题示例。我已经明确添加了css来显示引导类正在添加的内容。 https://plnkr.co/edit/csEfhyrhQLjI196c1cER?p=preview

非常感谢任何帮助。

1 个答案:

答案 0 :(得分：2)

IE需要flex: 1而不是flex-grow: 1，这只是意味着，占用剩余空间，无论内容大小

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

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

Stack snippet 

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

相关问题
最新问题