Customize CustomScrollPanel ScrollBars?

Question

I want to customize the scrollbars of a CustomScrollPanel. I want to customize the scroll bars and I want to enable and disable the vertical and horizontal scrollbars separately.

This is MyScrollPanel:

public class MyScrollPanel extends Composite implements HasWidgets {

    public interface ScrollPanelResources extends CustomScrollPanel.Resources
    {
        @Override
        @Source( { "test/web/client/widgets/ScrollPanel.css", CustomScrollPanel.Style.DEFAULT_CSS } )
        CustomScrollPanel.Style customScrollPanelStyle();
    }

    public interface HorizontalResources extends NativeHorizontalScrollbar.Resources
    {
        @Override
        @Source( { "test/web/client/widgets/HorizontalScrollbar.css", NativeHorizontalScrollbar.StyleTransparant.DEFAULT_CSS } )
        NativeHorizontalScrollbar.Style nativeHorizontalScrollbarStyle();
    }

    public interface VerticalResources extends NativeVerticalScrollbar.Resources
    {
        @Override
        @Source( { "test/web/client/widgets/VerticalScrollbar.css", NativeVerticalScrollbar.StyleTransparant.DEFAULT_CSS } )
        NativeVerticalScrollbar.Style nativeVerticalScrollbarStyle();
    }

    public interface Resources extends ClientBundle {

        @Source({"test/web/client/widgets/MyScrollPanel.css"})
        Css css();
    }

    public interface Css extends CssResource, AppCss {

        String resizeLayoutPanel();
        String customScrollPanel();

    }

    Resources resources;


    private ResizeLayoutPanel resizeLayoutPanel;
    private CustomScrollPanel customScrollPanel;


    public MyScrollPanel() {
        resources = GWT.create(Resources.class);
        resources.css().ensureInjected();
        resizeLayoutPanel = new ResizeLayoutPanel();
        resizeLayoutPanel.setStyleName(resources.css().resizeLayoutPanel());


        customScrollPanel = new CustomScrollPanel((MyScrollPanel.ScrollPanelResources) GWT.create(MyScrollPanel.ScrollPanelResources.class));
        customScrollPanel.setHorizontalScrollbar(new NativeHorizontalScrollbar((HorizontalResources) GWT.create(HorizontalResources.class)),
        AbstractNativeScrollbar.getNativeScrollbarHeight());
        customScrollPanel.setVerticalScrollbar(new NativeVerticalScrollbar((VerticalResources) GWT.create(VerticalResources.class)),
        AbstractNativeScrollbar.getNativeScrollbarWidth());

        customScrollPanel.addStyleName(resources.css().customScrollPanel());


        resizeLayoutPanel.add(customScrollPanel);
        initWidget(resizeLayoutPanel);
    }


    @Override
    public void add(Widget w) {
        customScrollPanel.add(w);
    }


    @Override
    public void clear() {
        customScrollPanel.clear();
    }


    @Override
    public Iterator<Widget> iterator() {
        return customScrollPanel.iterator();
    }


    @Override
    public boolean remove(Widget w) {
        return customScrollPanel.remove(w);
    }




}

I found this post GWT CustomScrollPanel example but it does not solve the problem.

How can I customize the scroll bars and enable and disable the vertical and horizontal scrollbars separately?

How can I style the custom scroll bars?

Andrei Volgin · Answer 1 · 2014-02-05T16:22:25.693

0

CustomScrollPanel provides two methods:

.getHorizontalScrollbar()
.getVerticalScrollbar()

You can then show/hide them when necessary, or apply whatever CSS you need.

edited Feb 05 '14 at 16:22

answered Feb 05 '14 at 15:23

Andrei Volgin

40,755
6
49
58

How can I style the custom scroll bars? – Michael Feb 05 '14 at 15:35
.getElement() on your panel and then set overflow-x:hidden to hide horizontal bar, for example. Or, myScrollPanel.getHorizontalScrollbar() and hide it. – Andrei Volgin Feb 05 '14 at 16:18
"visibility: hidden;" or any other CSS you want to apply. – Andrei Volgin Feb 05 '14 at 17:58
How do I change the css of the scrollbar? – Michael Feb 05 '14 at 17:58

Customize CustomScrollPanel ScrollBars?

1 Answers1