Is there a way to get the absolute position of a component in KVision?

# kvision

[Lars Erik Rojeras]

Is there a way to get the absolute position of a component in KVision?

[Robert Jaros]

Do you have a absolutely positioned component (with position = Position.ABSOLUTE)?
Or do you want to get a value computed somehow for a normal component?

[Robert Jaros]

You can use jquery bindings

[Lars Erik Rojeras]

I want to be able to calculate the height of the "rest of the viewport". That is to be able to set that height to force a tabulator table to fit and be re-sizable.

[Robert Jaros]

Shouldn't tabulator do this itself?

[Robert Jaros]

http://tabulator.info/docs/4.8/layout#virtual-dom
look at the Table Resizing section

[Robert Jaros]

as far as I remember older versions of tabulator required a fixed height to be set

[Robert Jaros]

but current version should work with auto height

[Lars Erik Rojeras]

I am trying to get rid of the pagination and just get a scrollable table, which always fit on the screen when I resize the browser window.

[Lars Erik Rojeras]

If I do not specify the height the table extends outside the screen, and the whole page scrolls.

[Robert Jaros]

I'v tested tabulator with

width = 100.vw
                height = 100.vh

[Robert Jaros]

and it perfectly fits the window and resize

[Lars Erik Rojeras]

Yes, but I have other panels above the table, och their height can change dynamically. I think it comes down to specifying the height of the tabulator as "100.perc of rest of viewport".

[Robert Jaros]

you can create a VPanel container with height = 100.vh to fit the screen size

[Robert Jaros]

and then put tabulator and other components inside like this:

root("kvapp") {
            vPanel(alignItems = AlignItems.START, noWrappers = true) {
                height = 100.vh
                val ul = ul {
                    li("test")
                }
                button("add").onClick {
                    ul.add(Li("test"))
                }
                tabulator(data,
                    options = TabulatorOptions(
                        layout = Layout.FITCOLUMNS,
                        columns = listOf(
                        // ...
                        ), pagination = PaginationMode.LOCAL, paginationSize = 10, dataTree = true
                    ), types = setOf(TableType.BORDERED, TableType.STRIPED, TableType.HOVER)
                ) {
                    height = 100.perc
                }
            }
        }

[Robert Jaros]

the list and the button simulate changing size of other components

[Robert Jaros]

when the list grows the tabulator gets automatically smaller

[Robert Jaros]

and add a reasonable minHeight to tabulator so it wont disappear ;-)

[Lars Erik Rojeras]

Yes, this is exactly what I want. But, my problem is to set the height of the vPanel. In my application it is nested below and inside other components. I need some way to calculate its size.

[Robert Jaros]

to calculate the size (height) of any element it's probably easiest to use jQuery bindings:

val ul = ul {
                    li("test")
                }
                button("add element").onClick {
                    ul.add(Li("test"))
                }
                button("print height").onClick {
                    console.log(ul.getElementJQuery()?.height())
                }

[Robert Jaros]

its perfectly documented here:
https://api.jquery.com/height/

[Robert Jaros]

And there are also:
https://api.jquery.com/innerheight/
https://api.jquery.com/outerheight/

[Lars Erik Rojeras]

Thanks, will take a look.

[Lars Erik Rojeras]

That worked very well. Now it behaves exactly as I want. Thankt!