Square Small Buttons

Vaadin 6 / 7 / 8
1

What is the best and smipliest way to create a small square button. The small button style is the right height for what I need, but it is two wide and if I change the width to match the height it does not display correctly. Basically I want to create a buttion about 19px by 19px that displays on character in it.

2

So button.setWidth(“19px”) has some problem? The button element has some internal padding, which you need to eliminate or reduce in CSS/Sass with something like “.v-button-small {padding: 0 0;}”. And to make them square you’d need to set “border-radius: 0”.

3

I tried the padding setting you suggested and messed around with a few other, and the results did not work. They were similar to what I get when I attempt to set the width to “20px”. When I do that the right side of the button is cut off. When I change the padding the left side of button is cut off. The two together cut off both sides of the button, but not equally.

4

Hey Freddy,

What theme are you using? If it’s Valo, this should definitely work:

Button square = new Button();
square.setIcon(FontAwesome.ADJUST);
square.setStyleName(ValoTheme.BUTTON_ICON_ONLY + " " + ValoTheme.BUTTON_SMALL + " square");

SCSS

.v-button.square {
  width: $v-unit-size--small;
}
5

Or this if you don’t want to use icons:

Button square = new Button("A");
square.setStyleName(ValoTheme.BUTTON_SMALL + " square");

SCSS

.v-button.square {
  padding: 0;
  width: $v-unit-size--small;
}
6

My theme includes the reindeer theme, which was the default when I started the project. As far as I know I am not usng the Valo theme.

7 
Button btn = new Button("A");
btn.addStyleName(Reindeer.BUTTON_SMALL + " square");

SCSS

.v-button.square {
  width: 20px;

  .v-button-wrap {
    padding: 0 6px 0 0;
  }
}
8

Thanks, that worked.