Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Button not expanding on its own based on font size in valo
We are using valo theme and when i set the button icon with font-size 38px; the button is not expanding properly accroding to the content and I have to set the height and width of button explicitly. Also the icon is not aligned properly in the button. My expectation is that the icon should be in center by default and button should expand on its own but that is not happening.
Is there an issue with the button or i am doing something wrong.
Below is the style definition:
@mixin button-icon-font($font-size: $default-icon-font-size, $background: none, $border: none) {
font-size: $font-size;
line-height: $font-size;
width: $font-size;
height: $font-size;
//do not want button background or border or box even on hover or after click
background: $background;
border: $border;
box-shadow: none;
&:hover{
&::after{
border: $border;
background: $background;
}
}
&:focus{
&::after {
border: $border;
box-shadow: none;
}
}
}
Explicit height will do that. Try this:
Button btn = new Button("Large icon");
btn.setIcon(FontAwesome.APPLE);
btn.addStyleName("huge-icon");
.huge-icon {
height: auto;
.v-icon {
font-size: 38px;
}
}