How to Increase the Minimum Width (minWidth) of a LoginForm in Vaadin?

General
1

Hello everyone,

I am working on a project using Vaadin version 24, and I want to increase the minimum width (minWidth) of a LoginForm component.

1 Like
2

Have a look at the styling documentation. There you can find the CSS selectors

1 Like
3

Hey Simon, I’m also struggling to understand how to adjust the width of the LoginForm. The documentation lists the CSS selectors, but it doesn’t tell us which selector has the width set to 360px. I have tried finding it Chrome dev tools, but each element seems to have the width inherited from somewhere else.

In my case I’m trying to put a LoginForm into TabSheet along with a FormLayout for my registration form. I think all I need to do is to clear the width on the LoginForm, but nothing I have tried has worked.

LoginForm loginForm = new LoginForm();
FormLayout registrationForm = new FormLayout();
TabSheet tabSheet = new TabSheet();
tabSheet.add("Login", loginForm);
tabSheet.add("Register", registrationForm);

I tried loginForm.getStyle().set("width", "100%"); and loginForm.getElement().getClassList().add("w-full"); but both had no effect.

2024-09-27 at 19.04.51@2x
2024-09-27 at 19.04.51@2x2390×2190 188 KB

2024-09-27 at 19.05.22@2x
2024-09-27 at 19.05.22@2x2390×2190 181 KB

2024-09-27 at 19.06.38@2x
2024-09-27 at 19.06.38@2x1920×1173 172 KB

4

Check out Styling | Login | Components | Vaadin Docs

1 Like
5

Yes, thanks. That’s the same link you recommended before. I guess I need more help than that, if possible. As I mentioned before, I see a list of CSS selectors, but that doesn’t tell me how remove or change the width of the LoginForm. If you take a look at my response above you’ll see that I attempted a solution based on these selectors that didn’t work. Adding styling to a component is easy. Removing styling from a component is hard.

6

I don’t know. Styling is confusing to me. Especially when elements have been pre-styled. I went back through every element using Chrome Dev Tools and I still can’t find when element is actually setting the width. Every element seem to be set to width 100%.

7

Can you share the LoginView?

1 Like
8

Thanks Simon. I ended up going back to using the standard LoginOverlay and moving the registration form to another page. I played with it a little bit to see if I could figure out how to modify the form width, but I can’t even figure out how to add class names to the form. I’m going to give up on it for now. It’s easier just to leave it the way it is and style the registration form to look the same.

Thanks for your help. I’ll give it another shot soon and follow up here.

9

Maybe a great topic for a session Monthly Online Meetup - #5 by OnDemand

I also struggle sometimes with theming css etc.

10

You can add the following style to your /frontent/themes/yourtheme/styles.css:

vaadin-login-form-wrapper {
     min-width: 600px; 
}