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:
Comments
Post a Comment