RadioButton Alignment

Is there a way to change the radio button alignment dynamically based on the screensize? For mobile, is it possbile to show them in vertical and for others in horizontal automatically ?

Couldn’t you do this with CSS?

any hint on how ?

Ok so i know how to change the radio button to vertical:

radioButtonGroup.addThemeVariants(RadioGroupVariant.LUMO_VERTICAL);

But i dont know how to add or remove these things based on screen size. I would also like to learn how to do this.

You can have a listener for when the width changes:

UI.getCurrent().getPage().addBrowserWindowResizeListener(event → {
Notification.show(“Called”);
});

But not sure about how to trigger this on page load

The vertical theme is just two lines of css, meaning you could easily customize it with media queries depending on your needs https://github.com/vaadin/web-components/blob/bc172cca777b8a6a2ffd26d879f41d7535175c2c/packages/radio-group/theme/lumo/vaadin-radio-group-styles.js#L29

I tried this

@media screen and (max-width: 100px) {
:host([theme~='vertical']) [part='group-field'] {
    display: flex;
    flex-direction: column;
  }
  }

but no luck. Please let me know what I’m missing

Where did you put it?

And keep in mind that you have to overwrite the other style, otherwise it won’t change anything because the Default Style is already applied

it is under

unknown.png

That’s correct, now you only have to overwrite the default style or another way would be to create your own theme “my-reponsive-thingy” and apply that theme to your radio group instead of the default by Vaadin

unknown.png

RadioButtonGroup<String> radioButtonGroup = new RadioButtonGroup<>();
        radioButtonGroup.addThemeName("my-reponsive-thingy");