I am testing the FlexLayout Add-on but I did run in a few problems. Basically I have a FlexLayout with two buttons that should align on the right.
public class ViewName extends Panel implements View {
public ViewName() {
setSizeFull();
VerticalLayout mainLayout = new VerticalLayout();
setContent(mainLayout);
// layout for the 2 buttons
FlexLayout backButtonLayout = new FlexLayout();
backButtonLayout.setSizeFull();
backButtonLayout.setFlexDirection(FlexDirection.Row);
backButtonLayout.setFlexWrap(FlexWrap.Wrap);
backButtonLayout.setJustifyContent(JustifyContent.FlexEnd);
mainLayout.addComponent(backButtonLayout);
mainLayout.setComponentAlignment(backButtonLayout, Alignment.TOP_RIGHT);
// back to all probes button
Button btn1 = new Button("Back to overview");
btn1.addStyleName("primary");
btn1.addClickListener(e -> {
UI.getCurrent().getNavigator().navigateTo("overview");
});
// back to start page button
Button btn2 = new Button("Back to start page");
btn2.addStyleName("primary");
btn2.addClickListener(e -> {
UI.getCurrent().getNavigator().navigateTo("start");
});
backButtonLayout.addComponent(btn1);
backButtonLayout.addComponent(btn2);
With this code I get a scrollbar next to the right button (see attachment). With a HorizontalLayout I never got the scroll. How do I get rid of the annoying scroll??
I also would like to have a small space between the 2 buttons. How??
How to use CSS for FlexLayout??
Thanks for your help!