Skip to content

Tabulator height=100% doesn't work correctly in a "fullscreen" application #4860

@hcgpalm

Description

@hcgpalm

Describe the bug
In a "fullscreen" application, i.e. using flex layout and a root container height expressed in vh units, setting the tabulator height to "100%" does not seem to account for the height of elements residing in a parent or sibling layout container.

In other words - if the tabulator resides in the root layout container it works fine. If you put it inside a nested <div> it starts to misbehave.

Tabulator Info
tabulator 6.4.0

Working Example
This is wrong - table height is off by the height of the textarea:
https://jsfiddle.net/s4frvmxp/

If the textarea and the tabulator are placed within the same layout container, it's fine:
https://jsfiddle.net/oy732nmr/

To Reproduce
A step by step guide to recreate the issue:

  1. Go to https://jsfiddle.net/s4frvmxp/

  2. Look at the output pane - the table is not expected to extend beyond the bottom of the viewport.

  3. Go to https://jsfiddle.net/oy732nmr/

  4. Look at the output pane - the table does not extend beyond the bottom of the viewport.

Expected behavior
The expected behaviour is that the table should follow normal CSS layout semantics and use 100% of the space available to it. In this case, not to extend beyond the bottom of the viewport.

Screenshots
Actual result:
Image

Expected result:
Image

Desktop (please complete the following information):

  • OS: Fedora 43
  • Browser: Firefox
  • Version: 148.0

Smartphone (please complete the following information):
N/A

Additional context
N/A

Metadata

Metadata

Assignees

No one assigned

    Labels

    Possible BugA possible bug that needs investigation

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions