ag-gridでflexboxを使う

CSSのキャッチアップ不足ってだけだけどag-gridを使っていてどうにも不便だなと思っていたのが明示的に高さを指定しないと潰れてしまうことがある点だった

  <ag-grid-angular #reportGrid
                   [gridOptions]="gridOptions"
                   [rowData]="gridRows"
                   class="ag-fresh">

これだけだとこんな感じで潰れてしまう

f:id:swfz:20180219024959p:plain

で、どうするかというと愚直に高さを指定するという方法をとっていました

  <ag-grid-angular #reportGrid
                   [gridOptions]="gridOptions"
                   [rowData]="gridRows"
                   style="height: 100%"
                   class="ag-fresh">

f:id:swfz:20180219025016p:plain

とりあえずグリッドを表示するだけなら上記で問題ないんですが、他の要素を同じページに入れたりして機能が追加されればされるほどカオスになっていきます

この前追加したメニュー1の高さ分だけ下にずれこんでる！追加された高さの分だけ100%から引かないと。。。みたいな話ですね

何かの変更でどこかの要素の高さが変更されるたびに修正をしなくてはならないという。。。

さらに追加した要素をボタンでトグルして表示非表示を切り替えられるようにしたり、切り替えた後は残りの余白は全てグリッドで埋められるように。。。みたいな話になってきます

そうすると上記で指定した決め打ちのstyleを動的に変更してあげる必要が出てきます

CSSで楽にできるっしょ！と思って意気揚々と調べたもののCSS力のなさにより想定時間内に調べきれず泣く泣く他要素のclientHeightを取得し全体の高さから引いた数値をグリッドの高さに割り当てる

といったことをやっていました

納得いかなかったので改めて調べてみたら簡単にできました！w

※コードは省略しています(angularを使ってます)

html

<div class="flex-container">
  <div class="well well-lg">Menu1 content</div>
  <div class="well well-lg">Menu2 content</div>
  <ag-grid-angular #reportGrid
                   [gridOptions]="gridOptions"
                   [rowData]="gridRows"
                   class="ag-fresh">
  .....
  .....
  .....
  .....
  </ag-grid-angular>
</div>

.flex-container {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: nowrap;
  align-self: auto;
  height: calc(100% - 50px);
  margin: 0;
}
.grid {
  display: flex;
  flex: 1 1;
  flex-direction: column;
}

flex: 1 1がポイントですね

flex-grow flex-shrink flex-basis(省略)をgridクラスにだけ指定しているので余白が余った時にgridのコンテンツの高さが変動するようになります

これによりgrid以外の要素が動的に変わったとしてもgridの高さは画面内に収めることができるようになりました

f:id:swfz:20180219025043g:plain