Display problem on Samsung Galaxy 3

123 views
Skip to first unread message

bryanb

unread,
Jul 5, 2012, 3:28:53 AM7/5/12
to google-we...@googlegroups.com
This simple program doesn't render correctly using the default browser on a Samsung Galaxy 3.

It works fine using Chrome, and it works fine on HTC devices and IPhone. It gives the same problem whether using 2.4.0 or 2.5.0.rc1.

The problem is with scrolling. The page displays, but if you scroll down to see all the lines in the Grid,  a blank screen display. If you scroll back you see the first lines.

This program can be tested at http://www.bjbcats.com/Bryan

Is there a problem with my code or the Samsung browser ?

Thanks.

public class Bryan implements EntryPoint {

public void onModuleLoad() {

    Resources.INSTANCE.css().ensureInjected();

   ScrollPanel sp = new ScrollPanel();
    FlowPanel fp = new FlowPanel();
    fp.add(makelb());

    Grid grid = new Grid(100,1);
    grid.setWidth("90%");
    grid.addStyleName(Resources.INSTANCE.css().bjbCentered());
    for (int i=0; i < 100; i++) {
grid.setWidget(i, 0, new HTML("This is row " + (i+1)));
    }
    fp.add(grid);
    sp.add(fp);
    RootLayoutPanel.get().add(sp);

}

ListBox makelb() {
    ListBox listbox = new ListBox();
    listbox.setVisibleItemCount(1);
    listbox.addStyleName(Resources.INSTANCE.css().bjbMobileControl());
    listbox.addStyleName(Resources.INSTANCE.css().bjbMobileButtonSize());
    listbox.addItem("--- Select ---", "0");
    listbox.addItem("Option 1", "1");
    listbox.addItem("Option 2", "2");
    listbox.setSelectedIndex(0);

    return listbox;

}
}

The two CSS stylings just make the button bigger for a mobile device.

.bjb-Mobile-Control {
margin: 8px;
padding: 8px;
display: block;
}

.bjb-Mobile-Button-Size {
margin-left: auto;
margin-right: auto;
width: 80%;
}

Joseph Lust

unread,
Jul 5, 2012, 1:46:57 PM7/5/12
to google-we...@googlegroups.com
FYI, works on the Galaxy S.

Sincerely,
Joseph

bryanb

unread,
Jul 8, 2012, 10:58:58 PM7/8/12
to google-we...@googlegroups.com
I've done a bit more investigation of this. I copied the HTML code generated in Chrome.

<html>
<body>
<div style="position: absolute; overflow: hidden; left: 0px; top: 0px; right: 0px; bottom: 0px; ">
<div style="overflow: auto; position: absolute; zoom: 1; left: 0px; top: 0px; right: 0px; bottom: 0px; ">
<div style="position: relative; zoom: 1; ">
<div>
..... table with 100 rows here
</div>
</div>
</div>
</div>
</body>
<html>

If I remove this line:

<div style="position: relative; zoom: 1; ">

the test code works fine on a Galaxy 3 using both the default browser and Chrome.  Pretty strange.

Reply all
Reply to author
Forward
0 new messages