setDefaultHeight/setMinHeight do not work inside of tabs?

[bschrameck]

SmartGWT v8.2p_2013-02-06/LGPL Development Only (built 2013-02-06)

Using IE9, tried in dev and regular mode

I have a list grid inside of a Tab (which, obviously, is inside of a TabSet). I would like to require a minimum size on the grid, but allow it to grow if there's extra room in the Tab's pane. Setting setMinHeight and setDefaultHeight do not work. However, manually specifying a height resizes the grid to that height and displays scrollbars in the Tab's pane, as expected. I would expect similar behavior for the two other functions when used together.

Here's a standalone test case that shows what I am seeing.

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;

public class MinHeightTest implements EntryPoint
{
    @Override
    public void onModuleLoad()
    {
        TabSet tabSet = new TabSet();
        tabSet.setWidth(500);
        Tab tab = new Tab("MyTab");

        ListGrid listGrid = new ListGrid();
        listGrid.setWidth(300);

        // WORKS!
        // listGrid.setHeight(650);

        // DOES NOT WORK...
        listGrid.setDefaultHeight(650);
        listGrid.setMinHeight(650);

        tab.setPane(listGrid);
        tabSet.addTab(tab);
        tabSet.draw();
    }
}

[Isomorphic]

By reading documentation you can find out what those methods actually do :)

There is a whole folder of samples of different auto-sizing modes in the Showcase under Grids -> Autofit.

[bschrameck]

Thank you for the prompt response.

I'm afraid I didn't make myself clear. I do not want the grid to expand or contract based on the number of records, and I am not trying to autofit the grid contents. I want it to take up the remaining space inside of a container, regardless of the number of records the grid has. As such, the height of the grid should be set to "*", which works fine. It expands and contracts to fill the remaining space of a VLayout I have.

However, I don't want the user to be able to resize it too small, so I want to enforce a minimum height and an initial height. The Tab's pane should scroll (not the grid, although that will also scroll if the number of records exceeds the number that can be shown within the specified height).

So say I set the initial height to 150px and the minimum height to 150px. Let's also say there is 200px worth of space left in the VLayout. The grid should then resize to 200px upon drawing. Let's say the user resizes to the point that there is only 100px of space left in the VLayout. The grid should resize to 150px (the minimum size) and then the Tab should display scrollbars. Likewise, if the user resizes the window so that there is 300px of space left, the grid should expand (and the Tab's scrollbars should disappear). In all of these cases, if the grid has too many records to display in its alloted size, it should show scrollbars.

Setting the grid height to "*" works beautifully, except for enforcing the minimum height requirement. And setting the height to a static value also works great, except for allowing it to expand when more space is available.

Thanks,
Brian

[Isomorphic]

Set Layout.minMemberSize to 150. This works so long as there's only one member with a flexible size (in your case, there's only one member at all).

[bschrameck]

That seems to do the trick, thanks! As it turns out I have multiple components in this VLayout, but only the last one needs to be dynamically resized.

This doesn't solve the underlying problem though, does it? That these two methods don't work properly when used inside of a tab?

[Isomorphic]

?

They do exactly what they are documented to do, inside a tab or elsewhere.

[bschrameck]

I'm not quite sure how my usage goes against any of the documentation. This works fine:

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.layout.VLayout;

public class MinHeightTest implements EntryPoint
{
    @Override
    public void onModuleLoad()
    {
        VLayout vlayout = new VLayout();
        vlayout.setWidth(350);

        // layout should take up all of the space
        vlayout.setHeight100();

        // layout should start at 650 px
        vlayout.setDefaultHeight(650);

        // layout should never resize smaller than 500 px
        vlayout.setMinHeight(500);

        // layout should show scrollbars when too small to fit contents
        vlayout.setOverflow(Overflow.AUTO);

        // 200 px tall label
        Label label = new Label("MyLabel");
        label.setHeight(200);
        vlayout.addMember(label);

        // 300 px tall grid
        ListGrid listGrid = new ListGrid();
        listGrid.setWidth(300);

        // grid takes up remaining space
        listGrid.setHeight("*");
        vlayout.addMember(listGrid);

        vlayout.draw();
    }
}

Once that exact same layout is put inside of a Tab, it does not:

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;

public class MinHeightTest implements EntryPoint
{
    @Override
    public void onModuleLoad()
    {
        TabSet tabSet = new TabSet();
        tabSet.setWidth(500);
        tabSet.setHeight100();
        Tab tab = new Tab("MyTab");

        VLayout vlayout = new VLayout();
        vlayout.setWidth(350);

        // layout should take up all of the space
        vlayout.setHeight100();

        // layout should start at 650 px
        vlayout.setDefaultHeight(650);

        // layout should never resize smaller than 500 px
        vlayout.setMinHeight(500);

        // layout should show scrollbars when too small to fit contents
        vlayout.setOverflow(Overflow.AUTO);

        // 200 px tall label
        Label label = new Label("MyLabel");
        label.setHeight(200);
        vlayout.addMember(label);

        // 300 px tall grid
        ListGrid listGrid = new ListGrid();
        listGrid.setWidth(300);

        // grid takes up remaining space
        listGrid.setHeight("*");
        vlayout.addMember(listGrid);

        tab.setPane(vlayout);
        tabSet.addTab(tab);
        tabSet.draw();
    }
}

[Isomorphic]

What doesn't work here? Which specific attribute is not doing what you expect?

Please take a close look at the docs for setMinHeight(), you will notice that its functionality would be expected to have no impact at all in either scenario you've shown.

[bschrameck]

Why not?

Here's setMinHeight's documentation:

Minimum height that this Canvas can be resized to.
Note that a Canvas with overflow:"visible" has an implicit minimize size based on it's contents.

That sounds pretty clear cut to me. This canvas should never be able to be resized smaller than the given value. It works fine in the first code snippet, and doesn't work in the second. In the second scenario the canvas get resized smaller and smaller until you hit something like 100 or 150px (I didn't measure), instead of the 500px limit that I asked for.

[Isomorphic]

The resize being referred to is a resize by the end user.

Again, this property has no effect in either scenario.

[bschrameck]

Well, now it makes sense. So a "resize" in the documentation only refers to resizes made by dragging the corner of a resizable component, NOT by resizing the browser window.

It definitely DOES have an impact in the first scenario, though. When I resize the window smaller than my specified minHeight, I get scrollbars. Either way, my issue is solved using setMinMemberSize, so I'm all set.

Thanks,
Brian

[Isomorphic]

This doc was updated a while ago to be more explicit that it's user resize that's effected.

No, really, it has no effect in either scenario. Try removing the setting, exactly the same thing will happen.