GWT unable to scroll on SimplePanel with fixed position

Question

I have a uibinder (CWArticles) that as the following xml body:

<g:HTMLPanel>
        <div align="center">
            <g:FlexTable ui:field="articlesTable" />
            <div align="right">
                <div>
                    <g:Button ui:field="btnPrevious" styleName="{style.nav-button}">Anterior</g:Button>
                    <g:Button ui:field="btnNext" styleName="{style.nav-button}">Seguinte</g:Button>
                </div>
            </div>
        </div>
        <g:SimplePanel ui:field="articleViewerPanel" />
    </g:HTMLPanel>

The last SimplePanel is an empty panel that I use to display the choosen article by the user adding another uibinder (ArticleViewer):

final ArticleViewer av = new ArticleViewer(visibleArticles, pos);
articleViewerPanel.add(av);

Wich has the following xml body:

<g:HTMLPanel>
        <g:SimplePanel styleName="{style.clickable-layer}"
            ui:field="clickablePanel" />
        <div align="center" class="{style.content}">
            <div class="{style.img-holder}" align="center">
                <g:SimplePanel ui:field="image" styleName="{style.img}" />
            </div>
            <div class="{style.img-data}">
                <!-- Image Label-->
            </div>
        </div>
    </g:HTMLPanel>

This panel is forced to be on top by applying the following css rules:

.content {
        position: fixed;
        width: 100%;
        margin: 0;
        padding: 0;
        top: 170px;
        left: 0;
        box-shadow: 0px 0px 10px 1px grey;
        z-index: 9000;
    }

Everything works fine. The only problem is that when the user try to scroll only the original panel in the back (CWArticles) moves.

What do I have to do to scroll the panel with fixed position (the one in the front)?

In the image the white panel with a picture and a red caption is the what I call the front panel. Everything behind is the panel in the back (CwArticles). As you can see in the pictures when I scroll only the back panel moves. I want to scroll the front panel.

Simply put I'm trying to achieve something like gmail attachment viewer.

Thank you very much.

Answer 1

Use ScrollPanel and make articleViewerPanel in different ui.xml and then finally add them using third ui.xml .

This is a sample code. It might help you to understand.

Try this one

public void onModuleLoad() {
    RootPanel.get().add(new SimplePanel3());
}

SimplePanel1.ui.xml

contains FlexTable and navigation buttons

<ui:style>
    .outer {
        border-left: 1px solid #999;
        border-bottom: 1px solid #999;
        cursor: pointer;
        cursor: hand;
    }

    .header {
        background-color: #d3d6dd;
        table-layout: fixed;
        width: 100%;
        height: 100%;
    }

    .header td {
        font-weight: bold;
        text-shadow: #fff 0 2px 2px;
        padding: 2px 0 1px 10px;
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
    }

    .table {
        table-layout: fixed;
        width: 100%;
    }

    .table td {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        padding: 2px 0 2px 10px;
    }

    .nav-button {
        border: 1px solid black;
        background: #CCC;
    }

    .alignRight {
        float: right;
    }

    .border {
        border: 1px solid #999;
    }
</ui:style>

<g:HTMLPanel>
    <g:FlexTable ui:field='header' styleName='{style.header}'
        cellSpacing='0' cellPadding='0' />

    <g:ScrollPanel height="100px" styleName="{style.border}">
        <g:FlexTable ui:field='articlesTable' styleName='{style.table}'
            cellSpacing='0' cellPadding='0' />
    </g:ScrollPanel>

    <g:HorizontalPanel styleName="{style.alignRight}">
        <g:Button ui:field="btnPrevious" styleName="{style.nav-button}">Anterior
        </g:Button>
        <g:Button ui:field="btnNext" styleName="{style.nav-button}">Seguinte
        </g:Button>
    </g:HorizontalPanel>
</g:HTMLPanel>

SimplePanel1.java

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HTMLTable.Cell;
import com.google.gwt.user.client.ui.Widget;

public class SimplePanel1 extends Composite {

    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

    /*
     * @UiTemplate is not mandatory but allows multiple XML templates to be used for the same
     * widget. Default file loaded will be <class-name>.ui.xml
     */
    @UiTemplate("SimplePanel1.ui.xml")
    interface MyUiBinder extends UiBinder<Widget, SimplePanel1> {
    }

    public SimplePanel1() {
        initWidget(uiBinder.createAndBindUi(this));

        header.setText(0, 0, "Name");
        header.setText(0, 1, "Reference");
        header.setText(0, 2, "Price");
        header.setText(0, 3, "Description");

        for(int i=0;i<10;i++){
            articlesTable.setText(i, 0, String.valueOf("Name "+'A'+i));
            articlesTable.setText(i, 1, String.valueOf("Reference "+'A'+i));
            articlesTable.setText(i, 2, String.valueOf("Price "+'A'+i));
            articlesTable.setText(i, 3, String.valueOf("Desc "+'A'+i));
        }

    }

    @UiField
    FlexTable header;

    @UiField
    FlexTable articlesTable;

    public void addClickHandler(final SimplePanel2 simplePanel2) {

        articlesTable.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                System.out.println("Click");

                Cell clickedCell = articlesTable.getCellForEvent(event);
                int rowIndex = clickedCell.getRowIndex();

                simplePanel2.setMessage(articlesTable.getHTML(rowIndex, clickedCell.getCellIndex()));

            }
        });
    }

}

SimplePanel2.ui.xml

There is no change in it. It is same as you have mentioned.

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>

    <ui:style>
        .clickable-layer {
            border: 1px solid black;
            background: #CCC;
        }

        .content {
            position: fixed;
            width: 100%;
            margin: 0;
            padding: 0;
            top: 170px;
            left: 0;
            box-shadow: 0px 0px 10px 1px grey;
            z-index: 9000;
        }

        .img-holder,.img-data,.img {
            background: blue;
        }
    </ui:style>
    <g:HTMLPanel>
        <!-- <g:SimplePanel styleName="{style.clickable-layer}"
            ui:field="clickablePanel" /> -->
        <div align="center" class="{style.content}">
            <div class="{style.img-holder}" align="center">
                <g:SimplePanel ui:field="image" styleName="{style.img}" />
            </div>
            <div class="{style.img-data}">
                <table>
                    <tr>
                        <td>
                            <b>Nome:</b>
                        </td>
                        <td width="5px" />
                        <td>
                            <g:Label ui:field="lblName" />
                        </td>
                        <td width="5px" />
                        <td>
                            <b>Ref:</b>
                        </td>
                        <td width="5px" />
                        <td>
                            <g:Label ui:field="lblReference" />
                        </td>
                        <td width="5px" />
                        <td>
                            <b>Preço:</b>
                        </td>
                        <td width="5px" />
                        <td>
                            <g:Label ui:field="lblPrice" />
                        </td>
                    </tr>
                </table>
                <g:Label ui:field="lblDescription" />
            </div>
        </div>
    </g:HTMLPanel>
</ui:UiBinder>

SimplePanel2.java

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.Widget;

public class SimplePanel2 extends Composite {

    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

    /*
     * @UiTemplate is not mandatory but allows multiple XML templates to be used for the same
     * widget. Default file loaded will be <class-name>.ui.xml
     */
    @UiTemplate("SimplePanel2.ui.xml")
    interface MyUiBinder extends UiBinder<Widget, SimplePanel2> {
    }

    public SimplePanel2() {
        initWidget(uiBinder.createAndBindUi(this));
    }

    @UiField
    SimplePanel image;

    @UiField
    Label lblName;

    @UiField
    Label lblReference;

    @UiField
    Label lblPrice;

    @UiField
    Label lblDescription;

    public void setMessage(String html) {
        lblDescription.setText(html);
    }


}

SimplePanel3.ui.xml

It combines above two simple panels.

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:p='urn:import:com.gwt.test.client'>

    <g:HTMLPanel>
        <p:SimplePanel1 ui:field='list' />

        <p:SimplePanel2 ui:field='detail' />
    </g:HTMLPanel>
</ui:UiBinder> 

SimplePanel3.java

package com.gwt.test.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class SimplePanel3 extends Composite {

    private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

    /*
     * @UiTemplate is not mandatory but allows multiple XML templates to be used for the same
     * widget. Default file loaded will be <class-name>.ui.xml
     */
    @UiTemplate("SimplePanel3.ui.xml")
    interface MyUiBinder extends UiBinder<Widget, SimplePanel3> {
    }

    public SimplePanel3() {
        initWidget(uiBinder.createAndBindUi(this));

        list.addClickHandler(detail);
    }

    @UiField
    SimplePanel1 list;

    @UiField
    SimplePanel2 detail;

}

Screenshot:

Answer 2

I figured this one out. I had to change the front panel (the one with the big picture) position from fixed to absolute.

.content {
        position: absolute;
        width: 100%;
        margin: 0;
        top: 40px;
        padding: 0;
        left: 0;
        box-shadow: 0px 0px 10px 1px grey;
        z-index: 9000;
    }

Thank you for your contribution.