Set Layout to height 100%

Hello,

i want that the right VerticalLayout is the same height as the left VerticalLayout (see screenshot). Has anybody an idea?

Example

        final HorizontalLayout horizontalLayout = new HorizontalLayout();

        ecpVaadinView1.setContent(horizontalLayout);

        horizontalLayout.setSizeFull();

        horizontalLayout.setSpacing(true);

        horizontalLayout.setMargin(true);

        final VerticalLayout layout1 = new VerticalLayout();

        layout1.addStyleName("group");

        layout1.addComponent(new TextField());

        layout1.addComponent(new TextField());

        layout1.addComponent(new TextField());

        layout1.addComponent(new TextField());

        layout1.addComponent(new TextField());

        layout1.addComponent(new TextField());

        final VerticalLayout layout2 = new VerticalLayout();

        layout2.addStyleName("group");

        layout2.addComponent(new TextField());

        layout2.addComponent(new TextField());

        layout2.setHeight(100, Unit.PERCENTAGE);

        horizontalLayout.addComponent(layout1);

        horizontalLayout.addComponent(layout2);

17505.png

layout1.setSizeFull();
layout2.setSizeFull();

Doesn’t work, same result…

    final HorizontalLayout horizontalLayout = new HorizontalLayout();

        horizontalLayout.setSizeFull();

        horizontalLayout.setSpacing(true);

        horizontalLayout.setMargin(true);

        final VerticalLayout layout1 = new VerticalLayout();

        layout1.setSizeFull();

        layout1.addStyleName("group");

        layout1.addComponent(new TextField());

        layout1.addComponent(new TextField());

        layout1.addComponent(new TextField());

        layout1.addComponent(new TextField());

        layout1.addComponent(new TextField());

        layout1.addComponent(new TextField());

        final VerticalLayout layout2 = new VerticalLayout();

        layout2.setSizeFull();

        layout2.addStyleName("group");

        layout2.addComponent(new TextField());

        layout2.addComponent(new TextField());

        horizontalLayout.addComponent(layout1);

        horizontalLayout.addComponent(layout2);

Did you call setSizefull() on the parent of the horizontalLayout ?

I also suspect that the UI is not 100% high, causing the content to be undefined high as well.

But then the other layout (groups) will be grow too.

The height from the left group is perfect. Just the right group should have the same height (see screenshot result).

17514.png
17515.png

My suggestion would be:

  1. Use Panel (leftPanel, rightPanel) instead of layout1, layout2 (leftPanel, rightPanel → setSizeFull),
  2. layout1, layout2 → setSizeUndefined,
  3. leftPanel.setContent(layout1), rightPanel.setContent(layout2),
  4. add leftPanel, rightPanel to horizontalLayout

Hope it works.

No :(… Same result now the group is to small…

        final HorizontalLayout horizontalLayout = new HorizontalLayout();
        horizontalLayout.setSizeFull();
        horizontalLayout.setSpacing(true);
        horizontalLayout.setMargin(true);

        final Panel leftPanel = new Panel();
        leftPanel.setSizeFull();
        final VerticalLayout leftLayout = new VerticalLayout();
        leftLayout.setSizeUndefined();
        leftLayout.addStyleName("group");
        leftLayout.addComponent(new TextField());
        leftLayout.addComponent(new TextField());
        leftLayout.addComponent(new TextField());
        leftLayout.addComponent(new TextField());
        leftLayout.addComponent(new TextField());
        leftLayout.addComponent(new TextField());
        leftPanel.setContent(leftLayout);

        final Panel rightPanel = new Panel();
        rightPanel.setSizeFull();
        final VerticalLayout rightLayout = new VerticalLayout();
        rightLayout.setSizeUndefined();
        rightLayout.addStyleName("group");
        rightLayout.addComponent(new TextField());
        rightLayout.addComponent(new TextField());
        rightPanel.setContent(rightLayout);

        horizontalLayout.addComponent(leftPanel);
        horizontalLayout.addComponent(rightPanel);

17516.png

Hi “Dennis Melzer” …
i’m just read your post and doing some coding and deploy the result to openshift for you , i hope if that will help you …
the application deployed here :
http://vaadin-jmatar.rhcloud.com/ROOT

here is the code :

https://github.com/jmatar-sd/VAADIN_SAMPLES/blob/master/src/main/java/core/MyVaadinUI.java

you are n’t needed to visit gitHub … here the MainPanel.java content :

package core;

import java.util.ArrayList;

import com.vaadin.ui.Button;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;

public class MainPanel extends CssLayout{
    
    private static final long serialVersionUID;
    static{
        serialVersionUID = -1482984139346326076L;
    }
        public MainPanel(){
        initRoot();
        initComponents();
    }
        
        //initialize root [ this parent ]
 attributes .
        private void initRoot(){
            // i'm Usually added i't -- don't care.
        }
        
        // define the left-side & right side layouts
        private void initComponents(){
        leftSide    = new VerticalLayout();
        rightSide    = new VerticalLayout();
        
        // left side width & height
        leftSide.setWidth("50%");
        leftSide.setHeight("100%");
        
        // right-side width & height
        rightSide.setWidth("50%");
        rightSide.setHeight("100%");
        
        //these classes names just for background color
        leftSide.setStyleName("left-side");
        rightSide.setStyleName("right-side");
        // <!-- -->
        
        
        addComponents(leftSide, rightSide);
        
        // add some buttons for the left side layout
        //initLeftSideButtons();
        
        // and then add some text-fields for the right side layout
        //initRightSideTextFields();
        
        // ! THANK YOU -- [ THE END ]

    }
    
    private void initLeftSideButtons(){
        buttons    = new ArrayList<>();
        
        buttons.add(new Button("i'm first button"));
        buttons.add(new Button("i'm secound button "));
        buttons.add(new Button("i'm secound button "));
        buttons.add(new Button("i'm secound button "));
        buttons.add(new Button("i'm secound button "));
        buttons.add(new Button("i'm secound button "));
        buttons.add(new Button("i'm secound button "));
        buttons.add(new Button("i'm secound button "));
        buttons.add(new Button("i'm secound button "));
        buttons.add(new Button("i'm secound button "));
        
        for(Button button: buttons){
            button.setWidth(100, Unit.PERCENTAGE);
            leftSide.addComponent(button);
        }
    }
    
    private void initRightSideTextFields(){
        textFields    = new ArrayList<>();
        
        textFields.add(new TextField("i'm first textField"));
        textFields.add(new TextField("i'm secound textField "));
        textFields.add(new TextField("i'm secound textField "));
        
        
        for(TextField textField: textFields){
            textField.setWidth(100, Unit.PERCENTAGE);
            rightSide.addComponent(textField);
        }
    }
    private
    VerticalLayout              leftSide, rightSide;
    private
    ArrayList<Button>            buttons;
    private ArrayList<TextField>
    textFields;
}

and then here is the MainUI source code :

package core;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.UI;

import core.main_panel.MainPanel;

@SuppressWarnings("serial")
@Theme("defaultTheme")
public class MainUI extends UI {

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = MainUI.class)
    public static class Servlet extends VaadinServlet {
    }

    @Override
    protected void init(VaadinRequest request) {
        final MainPanel    mainPanel    = new MainPanel();
        setContent(mainPanel);
        mainPanel.setSizeFull();
    }
    
    
}

GOOD Luck !

Thanks for the code, but it doesn’t help. The Problem still occurs

No ideas?

Can you allow remote access to your code?

Sure, there is a github project
https://github.com/SirWayne/ecp-vaadin

  1. checkout folder examples
  2. The next step is to set the Vaadin target contained in the project “org.eclipse.emf.ecp.makeithappen.vaadin.sample.target.platform” named “ makeithappen_Vaadin.target”. Open this file, wait until the target is resolved and click on “Set as target platform” in the top right corner of the target definition editor
  3. In org.eclipse.emf.ecp.makeithappen.vaadin.sample.app is the UI. Open the class VaadinMainUI.java and uncomment methode in line 41. That is the example.
  4. To start Jetty and the Vaadin Servlet go into project org.eclipse.emf.ecp.makeithappen.vaadin.sample.target.platform. Right click on the *.launch file and select “Run as” => “ vaadin_app”. The application is available at http://localhost:8080/ECP. Is the port 8080 not available, you have to edit the launch config “Run Configuration” => "config tab argument” => -Dorg.osgi.service.http.port=8080

Thanks