Vertical scrolling on mobile is perfectly acceptable. But horizontal scrolling is an absolute no-no! So if Fluid is mobile, why is my Fluid grid so wide? Why doesn't it reflow into a vertical rendering? Great question! A Flex Grid is the Fluid version of the plain-old Classic Grid. The only difference is the Flex Grid stretches to fill its container, whereas a Classic Grid's width is fixed. The Flex Grid is likely the most common Grid type for desktop, but it doesn't fit well on smaller form factors, as you may have experienced. So what can we do? The most common solution is to use PeopleCode to change the grid type. In the post Is PeopleSoft Fluid Mobile-ready? Setting the Browser Viewport, we said that Fluid + PeopleCode = Mobile, which holds true for grids. We can use PeopleCode to transform a Flex Grid into a mobile-friendly type, such as a List Grid, Div Grid, or Data Grid. Here is an example:
If %Request.BrowserDeviceFormFactor = %FormFactor_Small Then /* change to LIST grid */ &grid.Layout = %ListGrid; End-If;
PeopleCode alternatives include:
- Stacked Grid Group Boxes,
- Stacked Grid Group Boxes with Suppress-on attributes, and
- Custom CSS with breakpoints
With this in mind, let's extend our Fluid development formula to: Fluid + PeopleCode + Style Classes + Attributes = Mobile.
We cover grids in great detail in our Fluid 2 course, including Flex, List, Div, and Data grid types, and how to transform grids using PeopleCode and CSS. Checkout fluid.jsmpros.com to see when we are offering it next. Do you have a group of developers to train? Contact us for special group pricing!
