Search code examples
buttoniconsalignmentvaadinvaadin7

Vaadin - Align icon on button

I'm working on a simple back/forward-navigation with Vaadin existing of two buttons, each with a label and an icon (arrows left and right).

navigator = getUI().getNavigator();
    if (!StringUtils.isEmpty(backViewID)) {
        backButton = new Button(backButtonI18n, IconCache.FAST_REWIND_BUTTON.getIconResource());
        backButton.addClickListener(getBackButtonListener());
    }

    if (!StringUtils.isEmpty(nextViewID)) {
        nextButton = new Button(nextButtonI18n, IconCache.FAST_FORWARD_BUTTON.getIconResource());
        nextButton.addClickListener(getNextButtonListener());
    }

How can I align the icons on each button? Currently it looks like "<< Back" ">> Next", because icons are aligned on the left and text is aligned on the right side. I now want to align the icon for the next-button on the right side and the text on the left, to make it look like "<< Back" "Next >>".

I hope someone can help me with that.

Cheers, Hendrik

Solution

  • If you're using Valo, this is relatively easy. You just need to add a style name which is already shipped with the theme forwardButton.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_RIGHT):

    public class ButtonsComponent extends HorizontalLayout {
    public ButtonsComponent() {
        Button backButton = new Button("Back", FontAwesome.ARROW_LEFT);
        Button forwardButton = new Button("Forward", FontAwesome.ARROW_RIGHT);
        forwardButton.addStyleName(ValoTheme.BUTTON_ICON_ALIGN_RIGHT);
        addComponent(backButton);
        addComponent(forwardButton);
    }
}

    Alternatively you can just copy the same exact CSS from the valo-button-icon-align-right-style into your theme, and add that particular style to your button: forwardButton.addStyleName("my-custom-button-with-right-alligned-icon"); 

    .my-custom-button-with-right-alligned-icon {
  [class*="wrap"] {
    display: inline-block;
  }

  .v-icon {
    float: right;
    $padding-width: ceil($v-unit-size/2.4);
    margin-left: $padding-width + ceil($padding-width/-5);

    + span:not(:empty) {
      margin-left: 0;
    }
  }
}

    Either way, you should end up with something similar to:

    sample