Responsiveness breaking with tabbed screen flow
When using the TabbedScreenFlow7 harness and if the tabs are visible on the top of the screen, HTML5 UI responsiveness does not work when the screen size shrinks.
Without the tabs on the top of the screen, responsiveness works correctly.
Steps to Reproduce
- Use a Tabbedscreenflow7 harness having a screen layout (header and footer).
- Inside the work area, include the pyTabbedScreenFlow7Main section which forms the tabs and the flow action.
- Add a screenflow with multiple steps (about 6 to 7 steps) and refer the above harness.
- Use the pyscreenflow71 CSS file in the Harness level. Ensure that all the layouts of the sections are dynamic layouts.
- After the screen renders, shrink it to different sizes. The horizontal scrollbar displays and responsiveness does not work.
This behavior is as per Pega product design.
TabbedScreenFlow7 is an out-of-the-box rule that is not responsive by design.
Here’s the explanation for the reported behavior:
The user experience is to display all the stages in a single line and the out-of-the-box TabbedScreenFlow7 delivers that.
TabbedScreenFlow7 is not designed to support UI responsiveness.
As a local-change, for responsiveness, use other screen flow harnesses such as TabbedScreenFlow.