Panel height not 100%

Hi

I’m sorry about this, it must have been done to death. I’ve tried to follow the advice but so far without success.

I’m trying to create a layout with a form on the left side and a panel on the right. I want the panel to occupy the whole of the right hand side (vertically).

I’ve set the panel to full size and its layout to undefined, but still the panel is only as big as the label it contains.

Any help greatly appreciated.

Using Vaadin7.0.0.beta7 in Grails


package app

import com.vaadin.annotations.Theme
import com.vaadin.data.fieldgroup.FieldGroup
import com.vaadin.data.util.BeanItemContainer
import com.vaadin.server.ExternalResource
import com.vaadin.server.VaadinRequest
import com.vaadin.shared.ui.MarginInfo
import com.vaadin.shared.ui.datefield.Resolution
import com.vaadin.shared.ui.label.ContentMode
import com.vaadin.ui.themes.Reindeer
import editor.Person

import java.text.SimpleDateFormat

import com.vaadin.ui.*

@Theme("reindeer")
class PanelTest extends UI {
    Label html

    @Override
    protected void init(VaadinRequest request) {
        VerticalLayout root = new VerticalLayout()
        setContent(root)

        addComponent(createHeader())

        addComponent(createBody())

        addComponent(createFooter())

    }

    private HorizontalLayout createHeader() {
        HorizontalLayout titleLayout = new HorizontalLayout();
        titleLayout.setMargin(new MarginInfo(false, false, true, true));
        titleLayout.setStyleName(Reindeer.LAYOUT_BLACK);

        Label label = new Label("Panel Test");
        label.setStyleName(Reindeer.LABEL_H1);
        titleLayout.addComponent(label);
        Embedded logo = new Embedded("", new ExternalResource("/images/bunny_icon.png"));
        logo.setHeight("33px");
        titleLayout.addComponent(logo);

        titleLayout.setComponentAlignment(label, Alignment.BOTTOM_LEFT);
        titleLayout.setComponentAlignment(logo, Alignment.BOTTOM_LEFT);
        return titleLayout;
    }

    private HorizontalLayout createBody() {
        HorizontalLayout topLayout = new HorizontalLayout();
        topLayout.setSizeFull()
        topLayout.setMargin(false);

        VerticalLayout leftBodyLayout = createLeftBody()
        topLayout.addComponent(leftBodyLayout);

        Panel panel = createRightBody()
        topLayout.addComponent(panel)

        return topLayout;
    }

    private Panel createRightBody() {
        VerticalLayout layout = new VerticalLayout()
        layout.setSizeUndefined()
        Panel panel = new Panel("Content")
        panel.setContent(layout)
        panel.setSizeFull()

        html = new Label()
        html.setContentMode(ContentMode.HTML)
        layout.addComponent(html)

        return panel
    }

    private VerticalLayout createLeftBody() {
        VerticalLayout bodyLayout = new VerticalLayout();
        bodyLayout.setMargin(true);
        bodyLayout.setSpacing(true)

        bodyLayout.addComponent(createForm());

        return bodyLayout
    }

    Component createForm() {
        FieldGroup fields = new FieldGroup()
        VerticalLayout form = new VerticalLayout();
        DateField createdDate = new DateField("Created Date")
        createdDate.setResolution(Resolution.MINUTE)
        fields.bind(createdDate, "createdDate")
        form.addComponent(createdDate)

        form.addComponent(new Label("title"))

        ComboBox author = new ComboBox("Author", new BeanItemContainer<Person>(Person.list()))
        author.setNullSelectionAllowed(false)
        author.setRequired(true)
        form.addComponent(author)

        TextArea body = new TextArea("Content")
        body.setWidth("100%")
        body.setId("editorArea")
        body.setImmediate(true)
        form.addComponent(body)
        return form
    }

    private HorizontalLayout createFooter() {
        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy");
        Label label = new Label("&copy; " + dateFormat.format(new Date()), Label.CONTENT_XHTML);
        label.setStyleName(Reindeer.LABEL_SMALL);
        HorizontalLayout layout = new HorizontalLayout(label);
        layout.setMargin(new MarginInfo(false, false, false, true));
        layout.setStyleName(Reindeer.LAYOUT_BLACK);
        return layout;
    }
}

result:

very grateful for any help. thanks for your time
12688.png

Your code looks correct… try updating to a newer beta version.

Thanks for your advice.

I tried upgrading to beta10, but no joy. Problem remains.

I will try downgrading to 6.8.6…

The issue might be that you’re root layout is undefined height and the layout returned from createBody is 100% height. You can’t have 100% height inside undefined height.

This sort of issue pops up all the time. I still have windows/layouts that get clipped rather than showing me a scrollbar (especially for horizontal scrolling in a Form, for example, while a Table always seems to enable scrollbars for me).

What is the correct way to define a window/panel/layout so that it’s width and height is exactly big enough to hold all of its contents without scrolling? It seems that once that layout calculation is done, it would then have a definite size for which other components could then be relative to that size.

It seems a lot of people struggle with this, and I’m one of them! :wink:

I think this was basically it.

Literally one second before you posted I’d discovered setting:

root.setSizeFull()

made all the difference. I think making sure you have set the height to full on the whole layout hierarchy is necessary.


Then
though you might have to make sure you set

layout.setExpandRatio(component, 100)

so the content displays properly.

But that seems to have done it.

Thanks!

Well, no doubt that solved your particular issue, but the confusion still remains on how to set it all up.

I say this because once you set the size like that, if the layout is actually bigger, it may not create scrollbars. I know the rules are a bit tricky and is why it would be nice to have real clarity on how sizing works. The use of 100% width/height, undefined size and scrollbars is definitely something of an expertise in my opinion since I’ve struggled repeatedly with it (and it’s perhaps not all that confusing if you have the rules in front of you).