Vaadin - Align icon on button -


i'm working on simple back/forward-navigation vaadin existing of 2 buttons, each label , icon (arrows left , 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 align icons on each button? looks "<< back" ">> next", because icons aligned on left , text aligned on right side. want align icon next-button on right side , text on left, make "<< back" "next >>".

i hope can me that.

cheers, hendrik

if you're using valo, relatively easy. need add style name shipped 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 can copy same exact css valo-button-icon-align-right-style theme, , add particular style 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, should end similar to:

sample


Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

reactjs - React router and this.props.children - how to pass state to this.props.children -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -