resize button when wrap text

Flow
1

Good day Vaadinners!

I would like to know if it’s possible to resize buttons when the caption is in wrap mode. My problem is with the height, not with width.

Here is my code:
CSS:

.v-mybuttons .v-button-wrap {
    white-space: normal;
}

Autogenerated code:

[code]
button_guardar = new Button();
button_guardar.setCaption(“Guardar borrador”);
button_guardar.setImmediate(true);
button_guardar.setWidth(“100.0%”);
button_guardar.setHeight(“-1px”);
absoluteLayout_botones.addComponent(button_guardar,
“top:100.0px;right:0.0px;”);

    verticalLayout_botones = new VerticalLayout();
    verticalLayout_botones.setImmediate(false);
    verticalLayout_botones.setWidth("100.0%");
    verticalLayout_botones.setHeight("100.0%");
    verticalLayout_botones.setMargin(true);
    
    // absoluteLayout_botones
    absoluteLayout_botones = buildAbsoluteLayout_botones();
    verticalLayout_botones.addComponent(absoluteLayout_botones);

[/code]And I apply the style:

button_guardar.setStyleName("v-mybuttons"); With maximized window, the text is shown in just one line, and when I resize the window, the wrap works fine but the height of the button has not modified. I attach a image that I hope it explain the problem.

Thanks for all!!!

20826.png

2

Java

Button btn = new Button(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.");
btn.addStyleName("multi-line");
btn.setWidth("100%");

SCSS

.v-button.multi-line {
  height: auto;
  white-space: normal;
}
3

Thousands of thanks!!! It works fine!!!


EDIT:

If someone needs:

With Joacim’s code, the padding of the button is smaller than normal button, but it can be resized in CSS:

.v-button.multi-line {
    white-space: normal;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}
4

I replace button as Image using css like:
.mystyle .V-button{
padding: 0px;
background: none;
border: none;
text-shadow: none;
border-radius: 0px;
box-shadow: none;
}
but when the button click
overlayout
will come,i need to set hidden help me…

5

Hi. I’ve not prove this but I would set the style of the button on click event:

[code]
yourbutton.addClickListener(new ClickListener() {

@Override
public void buttonClick(ClickEvent event) {
    yourbutton.setStyleName("mystyle");
}

});
[/code]I think it could work.

6

thanks ji now its work fine !!!
Button save = new Button(“Save”);
Button cancel = new Button(“cancel”);

HorizontalLayout buttonLayout = new HorizontalLayout();
buttonLayout.addcomponent(save);
buttonLayout.addcomponent(cancel);
buttonLayout.addstylename(“mystyle”);
In css :
.mystyle .v-button{
color: black;
pading:0px;
}
how to add different style for button
both button
 …plz explain in detail

7

Hi!

You need to create more CSS Styles:
This is the general

.mystyle .v-button{ color: black; pading:0px; } And these are specific CSS Styles:

[code]
.mystyle2 .v-button-caption{
font-style: italic;
}

.mystyle3 .v-button-caption{
font-weight: bold;
}
[/code]You need to know there are two methods to apply styles: setStyleName(“mystyle”) and addStyleName(“mystyle”). See the API references (it’s trivial :wink: )

With these, you only need to add the styles, in the right order, to apply the styles you want to see. But apply the styles to the components, not to the layout. If you do that, the styles are applied to all buttons you add to the layout. I advice you to use Joacim’s code and my above code.

Good luck!