'Tabulator v5 maxHeight 100% not working when used inside flex box?

Goal is getting table-bottom and footer within the main layout. (light gray)

enter image description here

You find the puzzle here https://codepen.io/ironirc/pen/ExwQMLX

html structure:

<div style="height:300px;background-color:#555;padding:10px">
  <div class="col-layout">
    <div class="header">This is the header</div>
    <div class="table-wrapper">
      <div class="table" id="userTable">Table placeholder</div>
    </div>
    <div class="footer">This is the footer</div>
  </div>
</div>

css:

.col-layout {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: stretch;
  background-color: #999;
  box-sizing: border-box;
  height: 100%;
}
.header {
  background-color: #ff5c61;
}
.table-wrapper {
  background-color: black;
  padding: 10px;
  height: 100%;
}
.table {
  background-color: #4cd1a4;
}
.footer {
  background-color: #5ebeff;
}

Js omitted (see code pen)

Removing the table wrapper (black) solves the problem, but in my case I need it.

flexboxtabulator


Solution 1:[1]

change the the height: 300px; to height: auto;

(the first div you have in the code)

<div style="height:auto;background-color:#555;padding:10px">

here the code 

const data = [{
    email: "[email protected]",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "[email protected]",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "[email protected]",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "[email protected]",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "[email protected]",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "[email protected]",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "[email protected]",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "[email protected]",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "[email protected]",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "[email protected]",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "[email protected]",
    verified: true,
    roles: ["super"],
    language: "en"
  },
  {
    email: "[email protected]",
    verified: true,
    roles: ["super"],
    language: "en"
  }
];

(async function() {
  const mod = await
  import (
    "https://cdn.skypack.dev/pin/[email protected]/mode=imports/optimized/tabulator-tables.js"
  );

  const userTable = new mod.TabulatorFull(
    document.getElementById("userTable"), {
      columns: [{
          title: "Email",
          field: "email",
          headerTooltip: "Account EMail"
        },
        {
          title: "Verified",
          field: "verified",
          formatter: "tickCross"
        },
        {
          title: "Language",
          field: "language"
        },
        {
          field: "roles",
          title: "Roles"
        }
      ],
      layout: "fitDataFill",
      maxHeight: "100%"
    }
  );

  userTable.on("tableBuilt", function() {
    userTable.setData(data);
  });
})();
.col-layout {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-content: stretch;
  background-color: #999;
  box-sizing: border-box;
  height: 100%;
}

.header {
  background-color: #ff5c61;
}

.table-wrapper {
  background-color: black;
  padding: 10px;
  height: 100%;
}

.table {
  background-color: #4cd1a4;
}

.footer {
  background-color: #5ebeff;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>
</head>

<body>
  <div style="height:auto;background-color:#555;padding:10px">
    <div class="col-layout">
      <div class="header">This is the header</div>
      <div class="table-wrapper">
        <div class="table" id="userTable">Table placeholder</div>
      </div>
      <div class="footer">This is the footer</div>
    </div>
  </div>
</body>

</html>

Solution 2:[2]

This is correct, this is because of the way that flex layouts work, they will not shrink below the smallest size of the content, so once the table has been rendered it will not allow it to get smaller.

You should absolutely position a containing div in the flexed div, with top:0, left:0, height:100%, width:100%. Then stick your Tabulator inside that, it will then allow the flex layout to resize and the table to fit

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Laaouatni Anas
Solution 2 Oli Folkerd

Related Questions