table.setSizeFull() hangs with display:table;padding:10px;

Is this a bug, or just me doing something silly?

When styling one of my tables, I noticed the client would hang whenever I used setSizeFull(). I can repeat this hang with the following minimal UI:

@VaadinUI
@VaadinComponent
public class Test2 extends UI {
    @Override
    protected void init(VaadinRequest request) {
        setSizeFull();
        CssLayout layout = new CssLayout() {
            @Override
            protected String getCss(Component c) {
                return "display:table;padding:10px;";
            }
        };
        setContent(layout);
        layout.setSizeFull();
        Table table = new Table();
        table.setSizeFull();
        layout.addComponent(table);
    }
}

Seems to be caused by the combination of setSizeFull() and css of display:table;padding:10px;. I can work around this fine, but wondering if I should report it as a bug?

Padding of less than 10px seems to work fine. I see the same hang in Chrome and Firefox.

Dave

Some Vaadin layouts and components (such as Table) do some size recalculations to adjust the layout. It’s possible that the style setting creates a loop of some kind, although it sounds odd that just padding would do that.

Display: table? Is there a reason for that? Table normally uses inline-block, I think. I don’t know if that can cause trouble, it just looks odd. Are you sure the problem is with the padding and not the display: table?

If it’s just the padding, I guess it might justify a bug report. Getting hangs is a bad thing.

It’s reproducible with just that snippet - no extra style sheets etc.

Display:table - no, there’s no reason for this, it was leftover from an earlier layout (and since removed), but the hang only occurs with both display:table and padding:10px.

I’ve avoided the hang by fixing my CSS, but wondered if it warranted fixing :slight_smile:

Dave

Well, as Marko said, with some components you can’t use some css rules. This got hugely better with Vaadin 7 as some old browser support was dropped and thus some javascript size calculation could be dropped. For example the layouts were rewritten by using the natural browser flow instead of hard coded pixel sizes. Thus things like CSS margins can now be used with VerticalLayout / HorizontalLayout which was not possible earlier.

You have seemed to find one of these artifacts. I don’t think this warrants any fixes. As you said yourself, having display:table was an error and I can’t come up with any use cases where this would be needed. The upcoming Grid -component will be a replacement for Table and the possible issue will dissapear by then.

Fair enough. It took me a while to trace the issue, so hopefully this thread might be of help to anyone else that stumbles upon it.

Btw - I’m very much looking forward to the new Grid component. I had a quick play with the 7.4 alpha. Looks like it’s going to be awesome when its ready.