How to align/move Vaadin buttons


Tags: css,vaadin,vaadin7,vaadin6

Problem :

I am learning Vaadin and I would like to move two buttons to the bottom of pop up window with spacing in between the buttons. I'm pretty sure I would have to override the button css in my theme but how do I change the absolute location of the button in java code?

Here is my code: A simple button with a click listener that calls a pop up method (subwindow). In the below code I'm trying to move the yes button to the bottom of pop up window.

protected void init(VaadinRequest vaadinRequest) {
    final VerticalLayout layout = new VerticalLayout();

    Button helloButton = new Button("Click Me");
        helloButton.addClickListener(e -> helloPopUp()); 

    layout.setMargin(true);
    layout.setSpacing(true);
    layout.addComponents(helloButton);
    setContent(layout);
}

private void helloPopUp() {
        Window subWindow = new Window("Pop Up");                    
        HorizontalLayout subContent = new HorizontalLayout();
        AbsoluteLayout layout2 = new AbsoluteLayout();
        subContent.setMargin(true); 

            Label text = new Label( "Hello Pop Up" , ContentMode.PREFORMATTED);
            subContent.addComponent(text);

            Button yes = new Button("Yes");
            Button no = new Button("No");               
            layout2.addComponent(yes, "left: 50px; bottom: 0px;");

            subContent.addComponents(layout2);
            subContent.addComponent(no);
            subWindow.setContent(subContent);
            UI.getCurrent().addWindow(subWindow);           
        }


Solution :

Here is a way to do this without using AbsoluteLayout

private void helloPopUp() {
    Window subWindow = new Window("Pop Up");
    VerticalLayout subContent = new VerticalLayout();
    subContent.setMargin(true);

    Label text = new Label( "Hello Pop Up" , ContentMode.PREFORMATTED);
    subContent.addComponent(text);

    Button yes = new Button("Yes");
    Button no = new Button("No");

    HorizontalLayout buttonsLayout = new HorizontalLayout();
    buttonsLayout.addComponents(yes, no);
    buttonsLayout.setSpacing(true);

    subContent.addComponent(buttonsLayout);
    subContent.setComponentAlignment(buttonsLayout, Alignment.BOTTOM_LEFT);
    subWindow.setContent(subContent);
    UI.getCurrent().addWindow(subWindow);
}

    CSS Howto..

    How can I create this shape in CSS? [closed]

    How to modify CSS when requirements change?

    How i can put a picture above a border in css?

    How do I know which CSS is overriding my background image?

    Change jQuery slideshow script to rotate background image defined in css class

    How Do I Remove a CSS Value

    How can I center a graphic under a
      -based nav menu?

    How to gracefully override the old css with a new css by jQuery?

    HTML: slideshow is not recognised as an element in the main content of the page

    How to find a unique identifier using CSS for a class

    How to apply css to id generated dynamically?

    How to change
  • to variable width on css dropdown submenu
  • CSS - How to make different background color from css file used [closed]

    How to align content to the bottom of a div?

    How can i override the margin: 0; padding: 0; border: 0; css styles from main body css for ul li

    How do I override Bootstrap's
    border-left with a FontAwesome icon in CSS?

    How to make application browser compatible

    How to convert table with merged cells to responsive design?

    How can I make a Panel change background color while hovering in annotated 7.5 Vaadin?

    how to use !important in jQuery animate() function

    How do I create a fallback for the HTML5 search cancel button in webkit?

    How to stop image shrinking when page is resized horizontally in CSS

    How do i make part of a CSS background fit perfectly to a browser

    CSS: How to make a div block *not* take space in its parent container

    How to select text within li using css [duplicate]

    How to code a scrolling frame in css

    how to locate an element by value using css selector in webdriver?

    How to bottom align a title of variable length

    How can I change the color CSS property of an element using jQuery

    I have a simple image picture slider with JQuery, but I do not know how to animate up or down