vaadin apply css-classname for div inside menu

user_11497742 0
Viewed 73

i use two divs inside a simple horizontal-layout to manage responsive layouting.

public class UserMenu extends MenuBar {
    @Inject
    private ResourceManagerBean bundle;
    @Inject
    private SessionPrincipalPrimitiveIntf sessionPrincipal;
    @Inject
    private SSOHandlerIntf ssoHandlerIntf;

    @PostConstruct
    private void init() {
        SubMenu root = this.addItem(createProfileInformation(sessionPrincipal.getLoggedInUser())).getSubMenu();
        createMenuContent(root);

        this.setId("usermenu");
        this.addClassNames("ms-auto", "me-m", "usermenu");
    }

with createProfileInformation i let add a horizontalLayout which get added two divs

private HorizontalLayout createProfileInformation(UserDTO user) {
        HorizontalLayout layout = new HorizontalLayout();

        layout.add(createProfileInformationDesktop(user));
        layout.add(createProfileInformationMobile(user));
        layout.setId("loggeduser");
        layout.addClassName("loggeduser");
        return layout;
    }

the result in html enter image description here all fine.

but the css-styles are not accepted :( The css is in a my theme.jar

resource/META-INF/resources/themes/mytheme/base.css

.loggeduserdesktop{
  visibility: hidden;
  display: none;
}
.loggedusermobile{
   color: red;
}

later it will be solved with @media

so, why is vaadin not accepting the css declaration?

enter image description here

styled-components vaadin css
1 Answers

Thanks to Hawk and JChristophe in Discord.

While the elements are in the MenuBar, the styles will not applied from public. They must be added to the shadowdom

@CssImport(value = "./loggeduser.css", themeFor = "vaadin-menu-bar")
public class LoggerUser extends Span {

    public LoggerUser() {
    }

    public LoggerUser(String text) {
        super(text);
    }
}
user_114977420
Related