Css – GWT – hide horizontal scroll bar


I am wondering… Is there a way to hide horizontal scroll bar with GWT standard ScrollPane? I mean maybe not using outer CSS styles etc? Or you can recommend a more optimal way to achieve the effect?

…And concerning the CSS, right now I tried to set style like this for my ScrollPane

.a-scroll {
overflow-y: scroll;
overflow-x: hidden;

… but it seems it doesn't work and horizontal scrollbar is still visible :S So is there a workaround?


Best Solution

By default the ScrollPanel's overflow property is set to auto (i.e., the scrollbar will appear as needed) to obtain the most cross-browser solution. So it's up to the browser to decide when to display such scrollbars. Also, calling scrollPanel.setAlwaysShowScrollBars(false) is useless since is already called at construction time (in the initialize() method).

Anyway I found that what you are requesting is a known issue.

If you want to always hide the horizontal scrollbar you need to set the overflow-x: hidden property on the scrollable element of the ScrollPanel (as you tried, but such panel is not a simple div with an overflow property on it). Try with:

public class MyScrollPanel extends ScrollPanel {

  public void setAlwaysHideHorizontalScrollBar(boolean alwaysHide) {
    getScrollableElement().getStyle().setOverflowX(alwaysHide ? Overflow.HIDDEN : Overflow.AUTO);
  // ... and the like.

Remember that, if you set the above, in some browsers you will not be able to scroll horizontally anymore. Also overflow-x/y are CSS3 properties, while overflow is CSS2. So this might not be what you are after.

In such case some CSS tricks can help in order to hide the scrollbar but still allowing to scroll, something like this.

Anothe option could be using the CustomScrollPanel widget which allows, among other things, to hide the scrollbars by providing a, say, custom scrollbar with a zero-opacity style (not the best thing, tough).

Of course, another option could be to roll out your own div-based widget (maybe extending SimplePanel) with all the styles you need, as suggested in the issue.