Button's icon causes label to misalign

I just tried adding an icon to a button, and it caused the label to misalign

The code seems straightforward, though I am using a custom theme that inherits from reindeer (not runo):

// declaration
private Button cancelButton = new Button("Cancel", (ClickListener)this);
// icon setting
cancelButton.setIcon(new ThemeResource("../runo/icons/32/cancel.png"));

I set icon before I add the cancelButton to a HorizontalLayout that is used as the footer of a Form.

I don’t believe I changed any CSS that would the misalignment for buttons or images or such, but do have this to my buttons space nicely as they button set changes with setVisible depending on mode:

.groupForm .v-horizontallayout .v-button { margin-right: 5px; }

Firebug shows:

<div style="overflow: hidden; height: 26px; width: 107px; float: left; padding-left: 0px; padding-top: 0px;">
  <div style="float: left; margin-left: 0px;">
    <div tabindex="0" class="v-button" role="button" style="">
      <span class="v-button-wrap"><img alt="" class="v-icon" src="/open-eSignFormsVaadin/VAADIN/themes/esf/../runo/icons/32/cancel.png"><span class="v-button-caption">Cancel</span></span>
    </div>
  </div>
</div>

Hi,

Reindeer buttons don’t support icons larget than about 16-20px high. The icon you’re using is 32px high, and since the icon and the label are vertically aligned to middle, you get that output.

NativeButtons and Runo theme buttons don’t have this limitation.

You can fix it in one of the following ways:

  • Use the 16px version of the same icon, i.e. “…/runo/icons/16/cancel.png”
  • In your custom theme, add something along these lines to fix it[code]
    .my-button-with-icon .v-icon {
    margin-top: -6px;
    }

.my-button-with-icon .v-button-caption {
vertical-align: top;
}
[/code] * Revert to using NativeButton component or Runo theme

Thanks for the 16x20 dimension info for Reindeer icons. I’ll keep that info handy. I’m only using Runo icons now to see how they work, so I’ve just used the 16 as suggested and it lays out fine. Once we get past our investigation phase, we’ll no doubt create all of our icons for our custom theme.

Thanks!