Horizontal scroller always visible without vertical scrollbar

[ingosch]

If there's no vertical scrollbar the horizontal scroller is always vsisible even if the table is wide enough. The scroller can be moved slightly but has no effect on the tablecontent. Just the shadow get's activated/deactivated. This is caused by style property "width: calc(100% - 8px);" of the scrollbars div. This should be removed when there's no vertical scrollbar.

[nseb]

+1 same problem

[squinn]

+1, just ran into a similar problem

[vasiby]

+1 Scrollbars are broken in Chrome, but OK in Firefox. Libraries 2.1.1 and 2.2 have the same issue. The scrollbar at the bottom doesn't scroll anything

[lukas0krupa]

I had a look myself, as it is bothering me too, and it seem like there is a problem in XScrollPanel which incorrectly subtracts (as @ingosch commented) vertical scroll bar with from width.

I don't see any code to check if vertical scroll bar is visible (e.g. JQueryExtension.$(table.getScaffolding().getTableBody().getElement()).hasVerticalScrollBar())

I don't have a workaround for this, yet, but not sure if there is anything that can be done.

[lukas0krupa]

I had a look myself, as it is bothering me too, and it seem like there is a problem in XScrollPanel which incorrectly subtracts (as @ingosch commented) vertical scroll bar with from width.

I don't see any code to check if vertical scroll bar is visible (e.g. JQueryExtension.$(table.getScaffolding().getTableBody().getElement()).hasVerticalScrollBar())

I don't have a workaround for this, yet, but not sure if there is anything that can be done.

... and now I think I have workaround that work for me - subject to more testing.

...
table.addAttachHandler(event -> adjustHorizontalScrollBarWidth(table)); // I had to pass table, as I have multiple once
table.addRenderedHandler(> adjustHorizontalScrollBarWidth(table));
...
private void adjustHorizontalScrollBarWidth(final MaterialDataTable<?> table) {
    if (!JQueryExtension.$(table.getScaffolding().getTableBody().getElement()).hasVerticalScrollBar()) {
        table.getScaffolding().getXScrollPanel().getElement().setAttribute("style", "width: 100%");
    } else {
        int barSize = JQueryExtension.scrollBarWidth(table.getScaffolding().getXScrollPanel().getElement());
        if (barSize < 1) {
            barSize = 8;
        }
        table.getScaffolding().getXScrollPanel().getElement().setAttribute("style", "width: calc(100% - " + barSize + "px)");
    }
}

As mentioned above, it works for me, but it is subject to testing.

[HoochSDS]

Hi, I've tested your workaround and tweaked it a bit.

1. Our table @UiField MaterialDataTable<UserDTO> searchTable;

2. Define the workaround method "xScrollAdjust" in the View

  private void xScrollAdjust(MaterialDataTable<?> table) {
    int clientWidth = 0;

    Panel xScrollPanel = table.getScaffolding().getXScrollPanel();
    MaterialWidget tbody = table.getScaffolding().getTable().getBody();
    List<Widget> cList = tbody.getChildrenList();
    if (cList.size() > 0) {
      // we have rows
      Widget w = cList.get(0);
      clientWidth = w.getElement().getClientWidth();

      xScrollPanel.getElement().getStyle().setOverflowX(Style.Overflow.AUTO);
      if (!JQueryExtension.$(table.getScaffolding().getTableBody().getElement()).hasVerticalScrollBar()) {
        $("div.x-scroll").css("width", "");
      } else {
        // browser-dependent scrollable
        String scrollHeight = xScrollPanel.getElement().getFirstChildElement().getStyle().getHeight();
        $("div.x-scroll").css("width", "calc(100% - " + scrollHeight + ")");
      }
      // Set the correct x-scroll width, see also --> Bug on x-scroll element #166
      xScrollPanel.getElement().getFirstChildElement().getStyle().setWidth(clientWidth, Style.Unit.PX);
      GWT.log("Found x-scroll, set width: " + clientWidth + "px");
    } else {
      if (xScrollPanel != null) {
        xScrollPanel.getElement().getStyle().setOverflowX(Style.Overflow.HIDDEN);
        GWT.log("Found x-scroll, no rows --> set x-scroll hidden");
      }
    }
  }

3. Attach, the workaround method "xScrollAdjust" to the attach handler and the renderer handler, in the Table Setup.

    searchTable.addAttachHandler(event -> xScrollAdjust(searchTable));
    searchTable.addRenderedHandler(renderedEvent -> xScrollAdjust(searchTable));

And this is the result:

• no x-scroll bar if the table is wide enough
• no x-scroll bar if the table is empty
• Set the correct x-scroll width after table manipulations, see also --> Bug on x-scroll element #166

Attention this ist just a workaround and there are still problems on devices < 520px Thanks