Responsive Scrolling - What to know

In this article we discuss some issues that arise when you want to add scrolling to your table. Generally speaking, scrolling is useful when the "container area" is smaller than the "content area". In such cases the scrollbars allow you to view the part of the content that "overflows", as shown in the images below:

 

So, normally the scrollbars will appear only when the container area is smaller than the content area, which in our discussion let's assume it's always a table. This is important to understand because if you have selected to apply the responsive pattern horizontal scrollbars or any other option that is using scrolling, the scrollbars may never appear if the container has a fixed size (non-responsive) that is larger than the width of the table.

In order to solve this issue, you can set the width of the DIV wrapper around the table appropriately. The horizontal scrollbars responsive pattern has some options to make your life easier, such as the width parameter that will set the width of a DIV wrapper around the table. If this width is smaller than the table's width, the scrollbars will appear.

Another option is to add a responsive wrapper (i.e. a DIV element with a width that changes according to the viewable screen size) by clicking on the "add responsive wrapper" link.

In most cases you don't have to set any width value or add a responsive wrapper around your table. As a matter of fact, you should not do that unless you know what you are doing because you may break the responsive behavior of the table/site.