CODEWITHSUNDEEP
kotlinvaadin
Hexworks
Hexworks

Reputation: 534

Vaadin Grid in Horizontal Layout is not filling screen and flex grow is not working

I'm trying to put a simple Grid into a HorizontalLayout with a sidebar (which is just a Text box for now) it looks like this:

class FeedbacksView constructor(private val feedbackService: FeedbackService) : HorizontalLayout() {
    private val grid = Grid<FeedbackListModel>().apply {
        setItems(feedbackService.fetchFeedbacks())
        // add columns ...
    }

    private val sidebar = VerticalLayout().apply {
        add(Text("foo"))
    }

    init {
        width = "100%"
        height = "100%"
        setFlexGrow(3.0, grid)
        setFlexGrow(1.0, sidebar)
        add(grid, sidebar)
    }

}

and for some reason the layout does not fill the screen, nor the grid. The grid and the sidebar both have 50% width despite setting the flex grow to 3 and 1 respectively.

What could be the problem?

Upvotes: 1

Views: 1042

Answers (1)

Martin Vysny
Martin Vysny

Reputation: 3201

The problem is that :host on <vaadin-grid> specifies flex: 1 1 100%, the important part here being the flex-basis with the value of 100%. That translates to 'make me as big as possible'. The vertical layout has the width of 100% and flex-basis of auto, which too translates to 'make me as big as possible'. Apparently that overrides the flex-grow values and makes it share space 50%/50%.

The fix is to add flex-basis: auto to <vaadin-grid> and set the width of VerticalLayout to null. Then, they will maintain the ratio of 75%/25% (which is flex-grow 3/1).

For my Vaadin 8 mind this is absolutely weird :) I have written a blog post Vaadin 10 layouting for Vaadin 8 devs - you may perhaps find it useful.

ps: You could use the Karibu-DSL library; then you would be able to rewrite your code as follows:

class FeedbacksView(private val feedbackService: FeedbackService) : HorizontalLayout() {
    private val grid;
    private val sidebar;

    init {
       width = "100%"; height = "100%"
       grid = grid<FeedbackListModel> {
           flexGrow = 3.0
           setItems(feedbackService.fetchFeedbacks())
           // add columns ...
       }
       sidebar = verticalLayout {
           flexGrow = 1.0
           text("foo")
       }
    }
}

Upvotes: 1

Related Questions