Hi. Unfortunately I don't think there is a way to ...

# kvision

[Robert Jaros]

Hi. Unfortunately I don't think there is a way to make it directly with code, because TabPanel is not using flexbox. But you can do this with external CSS stylesheet:

.kv-tab-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.kv-tab-panel > div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

[Christer Palm]

Hi Robert!
Thanks for your response.

AFAICT that kind of works, but it seems that
1. The height of the actual tabs is subtracted from the total height, so the footer still appears below the visible part of the page and a scroll bar appears
2. For some weird reason, the scroll bar of the tabulator component is not activated, i.e. the list gets cut off with no way of getting to the last items?!
Any ideas?

[Robert Jaros]

I'm not sure there is an optimal solution for this. Tabulator height is calculated by its own algorithm and unless you pass the precise value it won't work correctly with flex layout.

[Robert Jaros]

If your header and footer have fixed sizes, you can use a hack with calc.

[Robert Jaros]

tabPanel() {
    tab("Tab") {
        div("Header")
        tabulator(
            model,
            options = TabulatorOptions(height="calc(100vh - 95px)", columns = listOf(ColumnDefinition("Item", "name"))),
            serializer = serializer()
        ) {

        }
        div("Footer")
    }
}

[Christer Palm]

Yeah, unfortunately the actual page is much more complex, i.e. "Header" and "Footer" are not of fixed known size 😞

Although tabulator does it's JS "virtual DOM" height magic (which I very much depend on), it seems to work perfectly fine in a 100vh page, unless I put it inside a tab 😞

It is something with tabPanel that breaks it, and I can't figure out what it is. Although I'm not by any means a CSS ninja, so maybe it's obvious.

[Robert Jaros]

Tabulator calculates its 100% size relatively to it's parent container. If your parent container fits the screen it will work. But if you add something else it will not. It can be just a simple additional div.

[Robert Jaros]

vPanel {
    width = 100.vw
    height = 100.vh

    div(className = "kv-tab-panel") {
        div("Not a tab")
        div {
            div("Header")
            tabulator(
                model,
                options = TabulatorOptions(columns = listOf(ColumnDefinition("Item", "name"))),
                serializer = serializer()
            ) {
                height = 100.perc
            }
            div("Footer")
        }
    }
}

[Christer Palm]

Hmm. I see...
So I'm actually having to separate problems here, I guess. tabPanel messing up the layout height, and tabulator not coping with the height correctly.
In reality, the tabulator is the bottom component in my view, that's why I didn't see it until I added the tabPanel around it.

So, although not exactly elegant, I could sort of cope with the tabPanel by using calc() to subtract what I believe would be the height of the tabs.

tabulator is another thing, I'm really 100% dependent on the "virtual DOM" thing.
Do you think that's a bug?
I tried messing with the native tabulator component, but that seemed to work fine...

[Christer Palm]

jsfiddle.net/cgsdkqo1/18/

[Robert Jaros]

https://jsfiddle.net/5wvrf62z/ - adding some extra content on top and there are scrollbars

[Christer Palm]

Removing overflow: auto from the top div seems to fix it. (Saved it to the fiddle, I think)
It doesn't get the height perfectly right, but at least I get the internal scrollbar in the table.

[Christer Palm]

But you're right, it doesn't see the height of the surrounding content... 😞

[Christer Palm]

(Tried to add a bunch more=

[Christer Palm]

)

[Robert Jaros]

But it is strange. Tabulator doesn't use absolute height. It just uses 100%. It should work. I even tried to force flexbox for all its layout, but still without success :(

[Christer Palm]

Exactly, it's not the behaviour that is described in the tabulator docs...

[Christer Palm]

(Neither is it consistent with the expected height semantics)

[Christer Palm]

So perhaps tabPanel is not really the problem at all, just tabulator(?)

[Robert Jaros]

Sorry, tried different things but can't make it work. I think it's something with the tabulator, because when I just remove all row nodes the layout works as expected. But it doesn't help with fixing the problem.

[Christer Palm]

Yeah, it's weird. I found some people posting about this issue, but one would think it'd be fairly well known. I'll dig a little deeper within the tabulator community.