0

I am trying to get an ag-Grid to fill the vertical space in a panel on a page. If I put the style on the .HTML page like this:

<style>
.right_panel > div {
    display: flex;
    flex: 1;
    height: 95%;
    flex-direction: column;
}
</style>

... or include it in the Javascript:

            $(".right_panel > div").css("display", "flex");
            $(".right_panel > div").css("flex-direction", "column");
            $(".right_panel > div").css("height", "95%");
            $(".right_panel > div").css("flex", "1");

... the styles will correctly show up in the Chrome CSS Debugger:

enter image description here

... but my ag-Grid is crushed down to zero height.

{image of a page with a grid that only has a navbar under which there's a lot of white space}

Disabling them and retyping them into the CSS Debugger verbatim:

enter image description here

... and the grid works fine

{image of a page with a grid that properly fills the page}

Is there something obvious (obviously) that I'm missing? I've read questions like this one to get the grid to fill the available vertical space. Why does this seemingly correct css only work when manually entered in the CSS debugger, and how do I fix it in my code?

Heavily edited HTML for the page:

<html>
<head>...</head>
<body>
<div id="main-view" ui-view="" class="ng-scope">
  <div class="vbox ng-scope">
    <div class="vbox-grow page-sidebar ng-scope splitter_panel" split-v="splitterCtrl">
     <main class="hbox-grow right_panel" style="width: 1233px;">
        <div ui-view="" class="ng-scope"><div class="task page ng-scope">  <!-- THIS is the line with the CSS I'm editing -->
          <div class="task page ng-scope">
            <article class="page-content">
              <ui-view class="ng-scope">
                 <article class="page-content ng-scope" style="height: 100%; background-color: aliceblue; display: flex; flex-direction: column; flex: 1;">
                   <div id="gridContainer" style="height: 100%; background-color: yellow; flex-direction: column; flex: 1 1 0%; display: flex;">

                    <!-- THIS is the div that gets populated with the ag-grid -->
                    <div id="gridContent" style="width: 100%; background-color: hotpink; flex: 1; display: flex; flex-direction: column;" class="ag-fresh">
sandyJoshi
  • 733
  • 9
  • 20
Bob Kaufman
  • 12,864
  • 16
  • 78
  • 107
  • can we see the HTML also – Temani Afif Dec 11 '17 at 21:23
  • I'm working on a [minimal example](https://stackoverflow.com/help/mcve) right now... there's an enormous amount of HTML on each page... – Bob Kaufman Dec 11 '17 at 21:25
  • Might be a [bug in Chrome](https://bugs.chromium.org/p/chromium/issues/list?can=1&q=flex+height). Can you repro in other browsers? – wOxxOm Dec 11 '17 at 21:32
  • The application uses Web SQL. As such, it only works in Chrome for now. – Bob Kaufman Dec 11 '17 at 22:55
  • I seem to remember something about ag-grid not working with flexbox in some GitHub issue. Not sure if it's relevant to your problem. – thirtydot Dec 12 '17 at 02:35
  • @BobKaufman "Web SQL was deprecated because standards are really important and turning Web SQL into a proper standard would have been prohibitively difficult". Read more here https://en.wikipedia.org/wiki/Web_SQL_Database and here https://softwareengineering.stackexchange.com/questions/220254/why-is-web-sql-database-deprecated – Asons Dec 12 '17 at 07:39
  • @BobKaufman Given the above I recommend to change technology ASAP. – Asons Dec 12 '17 at 07:44
  • When it comes to the `height` issue, what does the CSS look like for the `.right_panel` ? ... Also, if you use viewport units instead, does that work, e.g. like this: `height: 95vh;` – Asons Dec 12 '17 at 07:56
  • When do you run the javascript that puts in the CSS? if it isn't already in the onGridReady event, try putting it in there – Jarod Moser Dec 12 '17 at 17:18

0 Answers0