I have a layout question. ``` hPanel { ...

# kvision

[Lars Erik Rojeras]

I have a layout question.

hPanel {
                background = Background(Color.name(Col.BLUE))
                width = 100.perc
                height = 500.px
                vPanel {
                    background = Background(Color.name(Col.BEIGE))
                    width = 20.perc
                    height = 500.px
                    span("Left")
                }
                vPanel {
                    background = Background(Color.name(Col.GREEN))
                    width = 80.perc
                    height = 500.px
                    span("Right")
                }

With the code above I would like to have a blue panel containing a beige panel to the left which is 20% och the blue hPanel. To the right of the beige panel I would expect a green panel which is 80% wide compared to the blue hPanel. When I resize the browser I expect the relative width of the vPanels to remain the same.
This is not what I get. The vPanels widths seems to be based on the content of the text. Can I force the behavior I need, that is, to be able to have subpanels with a constant relative width of an outer panel, and staying that way when the browser is resized?