es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿El maxHeight del Tabulator v5 no funciona cuando se utiliza dentro de un flex box?

30 Jul, 2023 Programación

Objetivo: colocar la parte inferior de la tabla y el pie de página dentro del diseño principal. (gris claro)

Imagen de ejemplo

Puedes encontrar el problema aquí: https://codepen.io/ironirc/pen/ExwQMLX

Estructura HTML:

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

JavaScript omitido (ver código en CodePen)

Eliminar el contenedor de la tabla (negro) resuelve el problema, pero en mi caso lo necesito.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener la parte inferior de la tabla y el pie de página dentro del diseño principal (gris claro), necesitamos hacer algunos ajustes al CSS:

    1. En primer lugar, necesitamos cambiar la propiedad align-content de .col-layout a flex-start, para que los elementos se alineen en la parte superior del contenedor.
    .col-layout {
  ...
  align-content: flex-start;
}
    1. A continuación, debemos agregar flex-grow: 1 a .table-wrapper, para que ocupe todo el espacio vertical disponible en el contenedor.
    .table-wrapper {
  ...
  flex-grow: 1;
}
    1. Por último, debemos cambiar la propiedad height de .table-wrapper a 0 y agregar overflow: auto, para que haga scroll si el contenido de la tabla es demasiado alto para el contenedor.
    .table-wrapper {
  ...
  height: 0;
  overflow: auto;
}

    Aquí está el CSS actualizado:

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

    Con estos cambios, la tabla y el pie de página ahora deberían estar dentro del diseño principal:

    enter image description here

Comments are closed.