Custom styles are loaded before Lumo styles

Flow
1

Hello everyone!
I have a problem with Vaadin styling.

I have a WidokGlowny(MainView) class:

@HtmlImport(value = "styles/vaadin-textfield.html")
@HtmlImport(value = "styles/vaadin-textarea.html")
@HtmlImport(value = "styles/vaadin-checkbox.html")
@HtmlImport(value = "styles/vaadin-radiobutton.html")
public class WidokGlowny extends FlexLayout implements RouterLayout {
***
}

I’m importing there a few custom styles for vaadin components.
For example this is a preview of what is inside a vaadin-textfield.html:

<dom-module id="my-text-field-styles" theme-for="vaadin-text-field">
  <template>
    <style>      
		:host(.wrap-label) [part="label"]
{
		     white-space: normal;
		}
		 [part="input-field"]
 {
		     background-color: white;
		     border: 1px var(--lumo-contrast-5pct) solid;
		}
		 :host([disabled]
) [part="input-field"]
 {
		     background-color: var(--lumo-contrast-10pct);
		}

    </style>
  </template>
</dom-module>

I’m not adding any of vaadin input components to WidokGlowny.

Next I have another class:

@ParentLayout(WidokGlowny.class)
@Route(value = "wnioski", layout = WidokGlowny.class)
public class Wnioski extends Div implements RouterLayout, LocaleChangeObserver {
***
}

I’m only adding here vaadin buttons.

And finally I have:

@Route(value = "wnioski/wymiana", layout = Wnioski.class)
public class WymianaKartyPobytu extends Wniosek implements LocaleChangeObserver {
***
}

I’m adding here vaadin input components, text-fields, text-areas, radiobuttons, checkboxes

Everything on page looks like in attachment Bez tytułu.png

And here goes the problem. When I go directly to page [http://domain.com/wnioski/wymiana]
(http://domain.com/wnioski/wymiana) everything looks good. My styles are added after vaadin styles:

But when I go to [http://domain.com/wnioski]
(http://domain.com/wnioski) and then when I click button, which navigates me to [http://domain.com/wnioski/wymiana]
(http://domain.com/wnioski/wymiana), my styles are added before vaadin styles, so nothing looks like I wanted.

Am I doing something wrong?

17086807.png
17086810.png
17086813.png
17086816.png
17086819.png

2

Hi Michal,

i just checked the code you provided here. At the following part, the two annotation should not be used together in this way.

@ParentLayout(WidokGlowny.class)
@Route(value = "wnioski", layout = WidokGlowny.class)
public class Wnioski extends Div implements RouterLayout, LocaleChangeObserver {
***
}

in this case, i think you should remove the @parentlayout annotation
It is kind of confusing to use at the moment and we have an issue with mixed using these two annotations, https://github.com/vaadin/flow/issues/3865
Not sure this is the issue to cause this problem, but could you verify this firstly?

BR
Zhe

3

Hi Zhe,

I removed the annotation, but the page [http://domain.com/wnioski/wymiana]
(http://domain.com/wnioski/wymiana) looks now like this:

but it shoud look like this:

So as you can see, the annotation is important, because when I remove the annotation, router layouts paths are:
Wnioski > WymianaKartyPobytu (all imports from WidokGlowny are not present), but it should be:
WidokGlowny > Wnioski > WymianaKartyPobytu
17087212.png
17087215.png

4

Maybe I will explain how my layouts work.

So I have MainLayout(WidokGlowny), I have there menu, footer etc., also I override method showRouterLayoutContent to add elements in specific place (between top menu and bottom footer).

Then I have Wnioski. I override here method showRouterLayoutContent too. When someone go to page [http://domain.com/wnioski]
(http://domain.com/wnioski) parameter ‘HasElement’ of the method showRouterLayoutContent is null, so I know that I can add only buttons (each button navigates to other view (children layouts of Wnioski layout for eg. WymianaKartyPobytu)). But when somebody goes to [http://domain.com/wnioski/wymiana]
(http://domain.com/wnioski/wymiana) parameter is not null, so I remove all children of Wnioski (buttons), and I add parameter (example WymianaKartyPobytu).

I will show you on images:
Situation, when user is on [http://domain.com/wnioski]
(http://domain.com/wnioski):

Then when user clicks button, which navigates to WymianaKartyPobytu ([http://domain.com/wnioski/wymiana]
(http://domain.com/wnioski/wymiana)), the layouts looks like this:

So when I removed the annotation @Parentlayout the WidokGlowny was not present. So page crashed.

17087316.png
17087319.png