Sizing problem

Hello!

I have a window, which I want to take the entire available place in a browser. However, it doesn’t work - when I open it in a browser on a larger screen, lot of space is unused (see red ellipse in the screenshot below).

What is the starting place to start bug hunting?

Note: setSizeFull doesn’t work for me - when I use this method, the component in question becomes very small.

Thanks in advance

Dmitri

You probably missed the default VerticalLayout that is inside each Panel and Window. You need to set that to 100% height as well (mainWindow.getContent().setSizeFull()).

Hello!

Thanks for your answer.

I finally found the critical part of the problem.

In my application, I have

  1. DefaultMainWindow, in which
  2. a tab sheet with
  3. several tabs is created.

The described problem occurs with only one tab in the tab sheet. That tab is represented by the class DefaultMainProcessEditingPanel. In that panel, I have two split panels:

public void initGui() {
        this.debugIdRegistry = this.injector.getInstance(DebugIdRegistry.class);

        this.setSizeFull();
        this.setDebugId(this.debugIdRegistry.getDebugId(
                MessageCodePrefixRegistry.Module.mainprocesseditingpanel, "1"));

        final SplitPanel splitPanel1 = new SplitPanel();

        splitPanel1.setOrientation(SplitPanel.ORIENTATION_HORIZONTAL);

        splitPanel1.setSizeFull();

        splitPanel1.setSplitPosition(SPLIT_POSITION);

        splitPanel1.addComponent(getTreePanel());
        splitPanel1.addComponent(getSplitPanel2());

        /**
         * Dirty fix (START)
         */
        splitPanel1.setHeight("400px");
        /**
         * Dirty fix (END)
         */

        addComponent(splitPanel1);
    }

When I uncomment the part between “dirty fix” comments, I get a layout like this:

When I set it back to something like shown above (400px), then the window gets bigger (like in the screenshot in my first message), but it doesn’t adapt to browser sizes.

Any other hints? Does the time of setSizeFull invokation matter (whether I invoke it before adding components, or thereafter) ?

Note: I checked all sub-components of the GUI and all of them have size set to “full” (setSizeFull).

Best regards

Dmitri

On the top level, set a new Layout will SizeFull and call the setContent method instead of addComponent. Then add all Splitpanels on this layout.

VerticalLayout layout = new VerticalLayout();
layout.setSizeFull();
setContent(layout);

layout.addComponent(splitPanel1)

public void initGui() {
        this.debugIdRegistry = this.injector.getInstance(DebugIdRegistry.class);

        this.setSizeFull();
        this.setDebugId(this.debugIdRegistry.getDebugId(
                MessageCodePrefixRegistry.Module.mainprocesseditingpanel, "1"));

        final SplitPanel splitPanel1 = new SplitPanel();

        splitPanel1.setOrientation(SplitPanel.ORIENTATION_HORIZONTAL);

        splitPanel1.setSizeFull();

        splitPanel1.setSplitPosition(SPLIT_POSITION);

        splitPanel1.addComponent(getTreePanel());
        splitPanel1.addComponent(getSplitPanel2());

        /**
         * Dirty fix (START)
         */
        splitPanel1.setHeight("400px");
        /**
         * Dirty fix (END)
         */

        // addComponent(splitPanel1);
        [b]
setContent(splitPanel1);
[/b]
    }

The above should fix the problem (see last line).

As I said earlier, you missed the default vertical layout inside the main window.

When you use the addComponent method with either a Panel or a Window, the component will be placed inside the layout that is inside the Panel/Window. Using setContent you can change the root layout for the Panel/Window.

Thanks, guys, you are my heroes :slight_smile:

I wasn’t aware of this setContent subtlety.

Dmitri