Force flex layout

[jouni]

App Layout makes assumes that the host element is always display: flex.

If a user uses <vaadin-app-layout> as the root element of a design in Vaadin Designer, the tool will override the host with display: block, causing unexpected results.

We could prevent this by enforcing display: flex !important.

[alexberazouski]

The issue is not reproduced. Designer by default sets display block only for the parent element, and that doesn't break app-layout.

The described issue happened by manual overriding display value via theme-for="vaadin-app-layout" module.

@jouni Should we anyway set it important?

[jouni]

@emarc, can you add more detail to this issue? How did you end up in the situation that app-layout was display: block?

[emarc]

The issue was indeed the sum of a number of things:
Vaadin Designer does not allow multiple <dom-module> in one file, so I made my main-layout dom-module (in main-layout.html) into a theme-for in order to be able to work around the limitation with 100% height in <vaadin-app-layout>. However, Designer automatically puts :host { display:block } in each file, so I inadvertently applied that to <vaadin-app-layout> before realising (later, the bug was not obvious at first).

The reason I decided to apply the theme-for on the main-layout because 1) that's where I needed it, 2) I wanted to minimize the amount of files for my particular case, 3) the Project Base did not come with a suitable file (shared-styles?) and 4) I don't actually know what the correct place is or if it's ok to do it this way.

tl;dr vaadin-app-layout requiring theme-for + no shared-styles in Project Base + lazy programmer + Designer adding display:block + Designer not allowing multiple dom-module = bugging vaadin-app-layout.

Quite a sequence of events in my case... vaadin-app-layout could still make it harder for me to shoot myself in the foot, by making it hard to change things that should not be changed. The way the bug manifested itself (later, only at the smaller breakpoint, making it hard to find) speaks for fixing, while the fact that I have to somehow apply display:block makes this quite an edge case and speaks against fixing.

[alvarezguille]

I made my main-layout dom-module (in main-layout.html) into a theme-for in order to be able to work around the limitation with 100% height in

Luckily such limitation no longer exists, it was fixed in #56

could still make it harder for me to shoot myself in the foot, by making it hard to change things that should not be changed

We did this as part of #59

Thanks for the feedback and the detailed explanation, hopefully these small changes will save some time and surprises

[jouni]

Just realized, that having display: ... !important; means that the component can’t be hidden using display: none;. Probably not a relevant use case for app layout, but for some other components very much a critical use case.

[lkraav]

You probably mean "cannot be hidden"? Indeed, !important always has fun side effects.

EDIT lol I like how I pointed out your typo and then wrote "ben (be)" myself

[jouni]

Yes, meant to write “can’t”. Fixed now.