Search code examples
vaadinvaadin23

Vaadin 23 reduce buton width in the cell of FormLayout


I added a Button component to the FormLayout cell. Now, the button takes full cell width. I need to reduce the button width to be sized like an Icon or a little bit bigger. I tried to set button width with setWidth method, but the button width doesn't react to this. How to properly reduce the button width in FormLayout cell and aligh it to the left side of the cell? Right now I have the following:

enter image description here

but I need something like this:

enter image description here

Btw, are you able to access the demo examples on the following page https://vaadin.com/docs/latest/components/basic-layouts ? Right now, I may only see the code, but the actual examples don't show. They worked fine before.


Solution

  • That's how the FormLayout works.

    You could wrap the button into a Span. Then the Span will have the width calculated by the FormLayout and the Button keeps the set width.