Question

I’m trying to switch from CellTable to DataGrid. The actual change was very easy (APIs are the quite the same) – but I cannot get the grid to be visible without setting explicitly its width and height. In the CellTable it was enough to set width and height to 100% – and that is the behavior I want.

In my view I have two sections in HotrizontalPanel: one shows some tabs (buttons) and the other shows the grid. Each time a tab is clicked, the grid area is cleared and a new grid is created.

The view looks like this:

<ui:style>
    .expanded {
        width: 100%;
        height: 100%;
    }

    .simpleContainer {
        border-top: 5px solid #484848;
        border-bottom: 5px solid #484848;
    }
</ui:style>

<c:SimpleContainer addStyleNames="{style.simpleContainer} SimpleContainer">
    <g:HorizontalPanel>
        <g:HorizontalPanel ui:field="headersContainer"/>
        <g:FlowPanel ui:field="tablePanel" styleName="{style.expanded}"/>
    </g:HorizontalPanel>
</c:SimpleContainer>

And this is the snap of HTML from the running application:

<div class="GKQJTVMDCNC-com-mycode-management-client-ui-panels-PropertiesPaneView_PropertiesPaneUiBinderImpl_GenCss_style-simpleContainer SimpleContainer" id="x-widget-21" style="width: 1730px; height: 126px; ">
<table cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td align="left" style="vertical-align: top; ">....</td>
            <td align="left" style="vertical-align: top; ">
                <div class="GKQJTVMDBNC-com-mycode-management-client-ui-panels-PropertiesPaneView_PropertiesPaneUiBinderImpl_GenCss_style-expanded">
                    <div style="position: relative; overflow-x: hidden; overflow-y: hidden; " __gwtcellbasedwidgetimpldispatchingfocus="true" __gwtcellbasedwidgetimpldispatchingblur="true">
                        ....
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

The upper div has the right width and height, but somehow the DataGrid div has 1px height and 0px width (at list according to the chrome developer tool)

<div class="GKQJTVMDBNC-com-mycode-management-client-ui-panels-PropertiesPaneView_PropertiesPaneUiBinderImpl_GenCss_style-expanded">

Any idea?

Answer 1

Yes, CellTable did work with 100% height and width.
However the ”DataGrid” doesn’t.
You need to set an explicit width/height.
Alternatively you can put your ”DataGrid” in a ”LayoutPanel” that implements the ProvidesResize interface (i.e. SimpleLayoutPanel).
The benefit of using a LayoutPanel is that the Datagrid is automatically resized when you resize your browser window.