Valo (7.3.0 alpha 1) button alignment

Flow
1

I’m trying Vaadin 7.0.3 alpha 1 specifically to check the Valo theme, and specifically to see if unlike Reindeer, the Valo buttons can grow (vertically) in size and still look good, this in hopes to accomodate for 32x32 png icons in non-native buttons.

So far I’m glad to see the Valo buttons do grow in size, however I’m noticing that the icon in the button does not seem to be vertically centered.

I’m attaching the picture of how the button looks with a 16 pixel button, and how it lloks with a 32 pixel button (and setheight 48)

The code to generate te button is this:

        Button button = new Button("Click Me");

        ThemeResource icon = new ThemeResource("accept_button.png");
        button.setIcon(icon);
        button.setHeight(48, Unit.PIXELS);

        button.addClickListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                layout.addComponent(new Label("Thank you for clicking"));
            }
        });
        layout.addComponent(button);

¿Any idea on what is necessary to get icons vertically centered in Valo’s buttons?
15219.png

2

Hi, and thanks for testing out Valo.

It’s quite tricky to get the vertical alignment correct in all browsers simultaneously, so I’ve done some minor adjustments per browser. And since we need to support both image icons and font icons, those might behave a little different.

Can you specify what browser (os, version, etc.) you’re using, so I can try and fix the alignment better?

3

Hi Jouni

I found in the .scss that the size for buttons was calculated in the layout using multipliers of a “unit size”, with a different multiplier for each browser (110% for webkit, 103% for firefox, and other value for other browsers).

I played with the values and found something that seemed ok with my Chrome (latest) and Firefox (24) on Win7 x64. However, the size of the icon being used seemed to have an impact to the adjustment, so I’m unsure wether a simple multiplier will fix it for real.

I don’t have access to my code right now, I hope to provide more details over the weekend.