Appearance of extra scroll bar in GWT Datagrid

[Harsh Yadav]

Found in GWT 2.5

Encountered on OS / Browser:

Mac OSX 10.8.4, Chrome, Safari. This is not an issue on Firefox.

Detailed description:

While using the DataGrid, an extra scroll bar is visible.
Please find attached a screenshot form the GWT showcase.

In my application, I am using DataGrid (http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwDataGrid) combined with LazyScrolling example provided in the showcase (http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwCellList).


I am using DataGrid in ui binder as:

<h:LazyDataGrid ui:field="itsCellTable" pageSize="30"  height="520px" width="100%" />

LazyDataGrid extends DataGrid to expose grid's scroll panel as:

public ScrollPanel getScrollPanel() {
		HeaderPanel header = (HeaderPanel) getWidget();
		return (ScrollPanel) header.getContentWidget();
	}

This results in appearance of an extra (non-functional) scroll bar when the page loads (See attached screenshot).

Thanks in advance.

[Harsh Yadav]

Hi,

Does anyone else see the same issue?

Any input is appreciated.

Thanks,

Harsh

[Jens]

I can only see the issue happening when the page loads or when changing the browser size which make the second scroll bar appear sometimes. However scrolling itself works as expected. 

Looks like a weird CustomScrollPanel rendering bug i WebKit/Blink. Not sure if thats caused by GWT code.

-- J.

[Ryan]

I've seen the exact same issue starting around Chrome 22-22 on OSX. I've been unable to track down which element(s) are causing it but having to look at bugs me to no end. If you find out how to address it please report back.

Cheers,

Ryan

[ovidi...@gebs.ro]

Hello,

Any news on this issue? Or anybody found any workarounds?

Thank you,

O

[harshyadav]

No success so far.

Yes, only happens in Google Chrome.

--Harsh

[ovidi...@gebs.ro]

Hello,

This bug still occurs even on the simple DataGrid component from the showcase
http://gwt.googleusercontent.com/samples/Showcase/Showcase.html#!CwDataGrid

Also if you are using a mouse with your Mac the bug will NOT appear. Only if using the trackpad with default mouse settings from the Mac User Preferences (with the automatically stuff).

Until now I think that the problem is with the CustomScrollPanel that is used in the DataGrid. The extra scroll bar disspears when hovering the rows and/or selecting them, but reappears on page resize or refresh (even in the showcase).

The bug still occurs on Chrome/Safari on Max OSX Version 10.9: "Mavericks". 

O 

[Phineas Gage]

I've noticed the same problem. This is not a real fix, because it causes the scrollbar to be visible all the time, but if you set a custom scrollbar in webkit, it avoids the problem. For example, add this to your CSS, as it looks kind of similar to the Mavericks scrollbar, just a little lighter so it doesn't draw the eye as much:

::-webkit-scrollbar {

    width: 7px;

}

::-webkit-scrollbar-thumb {

    width: 7px;

    -webkit-border-radius:3px;

    border-radius:3px;

    background:rgba(0,0,0,0.3);

}

I'd rather have a real fix though.

[ghi...@gmail.com]

Just to say I'm still facing the same issue...no workaround or better solution after more than 1year?

On Saturday, August 10, 2013 11:02:47 PM UTC+2, harshyadav wrote:

[Hariharan Iyer]

I'm still facing the same issue too. However I'm not able to reproduce it in the showcase anymore 

http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwDataGrid

[Tranquiliser]

This issue can be fixed by removing overflow attribute from the div elements that are siblings of the table element within a DataGrid widget. Example code is below

$("table", dataGrid).each(next -> {

           Element tableElem = next.getObject(1); /* the 2nd param is the value. jQuery func signature: function( index, value ). */

           $(tableElem.getParentElement()).children().each(e -> {

               Element sibling = e.getObject(1);

               sibling.getStyle().clearOverflow();

           });

       });

The above code uses my own jQuery integration. But the idea is the same.