horizontal scroll appears in DataList (FF2)

Published by: admin 2010-03-11

In Firefox 2 horizontal scroll appears in DataList when it's not needed.
consider the following use case:

Gxt: Premium Help [Archive] - Ext JS Forums::
horizontal scroll appears in DataList (FF2) strange things with FormPanel Horizontal align for buttons in a tool bar doesnt work
http://extjs.com/forum/archive/index.php/f-25.htmlHOME

public class Test extends LayoutContainer implements EntryPoint {
public void onModuleLoad() {
Viewport v = new Viewport();
v.setLayout(new FitLayout());
v.add(this);
RootPanel.get().add(v);
}

private ContentPanel north = new ContentPanel();
private ContentPanel west = new ContentPanel();
private ContentPanel center = new ContentPanel();
private ContentPanel east = new ContentPanel();
private ContentPanel south = new ContentPanel();

protected void onRender(Element element, int i) {
super.onRender(element, i);

createBorderLayout();

addDataList();
}

private void addDataList() {
west.setLayout(new FitLayout());
LayoutContainer accordion = new LayoutContainer(new AccordionLayout());
ContentPanel panelOne = new ContentPanel();
panelOne.setAnimCollapse(true);
panelOne.setBodyBorder(false);
panelOne.setBorders(false);
panelOne.setLayout(new FitLayout());
panelOne.setHeading("Panel One");

Custom Query – dojo – Trac::
The fisheye widget appears to have problems in the Mac Safari browser. Scroll down in test_Dialog.html and click the button on the right, while the
http://trac.dojotoolkit.org/query?status=closed&verbose=1&milestone=1.1&order=priority&desc=1HOME

DataList list = new DataList();
list.setBorders(false);
for (int i=0; i<100; i++) {
DataListItem item = new DataListItem("Item "+i);
list.add(item);
}
panelOne.add(list);
accordion.add(panelOne);
west.add(accordion);

}

private void createBorderLayout() {
setLayout(new BorderLayout());

BorderLayoutData northData = new BorderLayoutData(Style.LayoutRegion.NORTH, 100);
northData.setCollapsible(true);
northData.setFloatable(true);
northData.setSplit(true);
northData.setMargins(new Margins(5, 5, 0, 5));

BorderLayoutData westData = new BorderLayoutData(Style.LayoutRegion.WEST, 200);
westData.setSplit(true);
westData.setCollapsible(true);
westData.setMargins(new Margins(5));

BorderLayoutData centerData = new BorderLayoutData(Style.LayoutRegion.CENTER);
centerData.setMargins(new Margins(5, 0, 5, 0));

BorderLayoutData eastData = new BorderLayoutData(Style.LayoutRegion.EAST, 200);
eastData.setSplit(true);
eastData.setCollapsible(true);
eastData.setMargins(new Margins(5));

BorderLayoutData southData = new BorderLayoutData(Style.LayoutRegion.SOUTH, 100);
southData.setSplit(true);
southData.setCollapsible(true);
southData.setFloatable(true);
southData.setMargins(new Margins(0, 5, 5, 5));

add(north, northData);
add(west, westData);
add(center, centerData);
add(east, eastData);
add(south, southData);
}

}

UPD: in IE6, IE7 when you drag divider between west and center panels , vertical scroll bar disappears. It happens when you make west panel wider, then drops divider, and then narrows west panel

Fix is in SVN. Please verify.

Is there something wrong with the screenshot for ff2? There are no scroll bars, but that is expected since horizontal scrolling is not needed. I tested the code and it work fine for me, when you resize the west region to be narrow, the data list shows the horizontal scrollbar.

http://darrellmeyer.com/snaps/143538.png

This is using your code from the previous posts.

Your code is wrong. You are changing the code back to the pre-fix state. The correct code is:

setScrollMode(Scroll.AUTOY);

Are you using the latest code from the trunk?

issue with vertical scroll bar in IE6, IE7 fixed.

I've changed my example a bit:

list.setScrollMode(Style.Scroll.AUTO);

and horizontal scroll still appears in FF2.

I'm using the latest code from the trunk - revision 651.
Darrell, probably you don't catch what I'm talking about.
I don't want to hide horizontal scroll at all. I just need it to appear when I resize west panel.
In IE6 Scroll.AUTO has proper behavior, but not in FF2.

Try to change DataListItem name and you'll see the issue:

DataListItem item = new DataListItem("Item with very long name for test"+i);

Consider the following code:

DataList list = new DataList();
list.setScrollMode(Style.Scroll.AUTO);

Result in IE6:
http://extjs.com/forum/attachment.php?attachmentid=8773&stc=1&d=1218723475

Result in FF2:
http://extjs.com/forum/attachment.php?attachmentid=8772&stc=1&d=1218723461