Panel Groups supported in Scrolling Panels¶

New in Vinyl 2.7 Panel Groups are supported inside of Scrolling Panels, to provide greater UI/UX flexibility with how overflow information is presented to users on an application screen. With this new support available, you can create more robust and complex scrolling option layouts for panels on pages. Previously overflow panels configured along these lines would display as tabs appearing at the bottom left. Now you have an option to have overflow panels stack and allow users to scroll (vs. tab) to view all of the content.

Use Case¶

Currently scrolling pages and panel groups stack all contained panels vertically with a 100% width, which seems appropriate for a narrow mobile device. For a desktop or tablet device it would be nice to have contained panels also appear side by side. This would allow for the creation of more elaborate presentations with a lot of panels. Think of Facebook, Twitter, and Instagram. These platforms all have long scrolling collections of panels that combine stacked and side by side layouts. See the following screenshot as an example:

Overview¶

Previously you could not define panel groups within scrolling pages or scrolling panel groups. This restriction has been removed. The behavior of defining panel groups within scrolling pages and groups will render the contained groups and panels as defined by the groups. You can mix and nest stacked and side by side panel groups as deeply as required to create the structure you need.

When the scrolling container encounters a child panel or stacked panel group it will expand to fill the width of the parent container. The height will be whatever is needed to fully render the content. This is how scrolling groups and pages work now.

When a scrolling container encounters a side by side child group it will render the side by side group as any other side by side group where the overall width of the group is defined by the parent layout. This is basically how non-scrolling layouts work. The height however will still be as tall as required to display the content like scrolling containers currently work.

If the outer page becomes too narrow, as on a phone, the side by side panels will start stacking vertically. This acts more like a current scrolling container today. So on a very narrow display you will end up with all panels and containers 100% wide and stacked vertically.

To Configure¶

To support this new option, a scrolling page or group can now contain child groups. In this example scenario, we'll assume we are going to configure something like the following example where we have a fixed left panel, a fixed footer panel, and a scrolling group occupying the majority of the upper right of the page. This scrolling group contains a collection of nested child groups and panels to create a tall scrolling area of panels.

The following graphic shows the collection of Groups defined for this particular page:

The following graphic shows the collection of Panels defined for this particular page: