Flow: Problems with "setSizeFul" on grid

Created on 15 Mar 2018 · 5Comments · Source: vaadin/flow

Hello,

I'm using Spring Boot 2.0.0.RELEASE and Vaadin 10.0.0.beta2.

See my example below. I have the problem that if I set the height of a Grid to 100% it's not rendered with this value in the UI. In the UI it isn't visible anymore, only a small grey bar is rendered.

I have also the problem in other applications with HorizontalLayout.

@Route("bug")
@Theme(Lumo.class)
@Tag("bug-example-view")
@HtmlImport("context://frontend/bug-example-view.html")
public class BugExampleView extends PolymerTemplate<BugExampleView.BugExampleViewModel>
{
    @Autowired
    private transient DataSource dataSource;

    @Id("idSearchTextField")
    private TextField idSearchTextField;

    @Id("grid")
    private Grid<Data> grid;

    @PostConstruct
    public void init()
    {
        idSearchTextField.setValueChangeMode(ValueChangeMode.EAGER);
        idSearchTextField.addValueChangeListener(evt -> updateGrid(evt.getValue()));

        grid.setSizeFull(); // <-- occurs that the grid is not visible in the UI, height isn't rendered to 100%...

        grid.addColumn(Data::getId).setHeader("ID");
        grid.addColumn(Data::getName).setHeader("Name");
        grid.setItems(dataSource.getPage(0, 100, null).getContent());
    }

    private void updateGrid(String id)
    {
        grid.setItems(dataSource.getPage(0, 100, id).getContent());
    }

    public interface BugExampleViewModel extends TemplateModel
    {

    }
}

The HTML file:

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/vaadin-ordered-layout/src/vaadin-vertical-layout.html">
<link rel="import" href="bower_components/vaadin-grid/src/vaadin-grid.html">
<link rel="import" href="bower_components/vaadin-text-field/src/vaadin-text-field.html">

<dom-module id="bug-example-view">
    <template>
<vaadin-vertical-layout style="width: 100%; height: 100%;" theme="margin">
 <vaadin-text-field style="width: 100%;" placeholder="ID" id="idSearchTextField"></vaadin-text-field>
 <vaadin-grid items="[[items]]" id="grid" style="width: 100%;"></vaadin-grid>
</vaadin-vertical-layout>
</template>

    <script>
        class BugExampleView extends Polymer.Element {
            static get is() {
                return 'bug-example-view';
            }
        }
        customElements.define(BugExampleView.is, BugExampleView);
    </script>
</dom-module>

question

Source

loefflefarn

All 5 comments

I don't know why / what is the grey bar about, but couple things:

First of all, I would not use sizing via both, the html in template and the Java code. I would recommend to use either, but not both. Makes it confusing and harder to maintain if it is not controlled from one place. Another option would be to use css

Second, you should switch the theme="margin" to be "padding" instead since with margin you'll get overflow.

And third, I don't think you should set the height for the grid at all, but instead use expand(...) or setFlexGrow(...) method (both do the same but first one is more familiar for FW users) for making sure the grid takes the size it needs.

pleku on 19 Mar 2018

The grey bar is shown when I had set the height of the grid to 100% or called the function setSizeFull.

This looks like a bug for me.

loefflefarn on 19 Mar 2018

I've found on problem: I don't set @BodySize(height = "100vh", width = "100vw") in my MainLayout. With it, its now working. But why is the grid not shown anymore if I set it to sizeful?

loefflefarn on 20 Mar 2018

Ah right. That is because 100% of undefined size is 0 (100 % of 0px is 0). Relative sizing only works when some of the parents has a defined size. In your case, if the <body> element has undefined size, then it works when you don't use relative sizing.

When you give the <body> element any size, defined or relative, all sizing for the children works too.

pleku on 21 Mar 2018

👍1

Since Flow 1.0.0.beta6, it's not needed to declare a @BodySize in the main layout anymore. When nothing is set, the application body is set to have height = "100vh", width = "100vw" by default.

When the body has a defined size, this bug doesn't happen.

I have added a test on Grid (vaadin/vaadin-grid-flow#141 ) to make sure it doesn't break in the future.