Skip to main content

This content has been archived and is no longer being updated. Links may not function; however, this content may be relevant to outdated versions of the product.

Support Article

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.

Error Messages

Not Applicable

Steps to Reproduce

  1. Use a Tabbedscreenflow7 harness having a screen layout (header and footer).
  2. Inside the work area, include the pyTabbedScreenFlow7Main section which forms the tabs and the flow action.
  3. Add a screenflow with multiple steps (about 6 to 7 steps) and refer the above harness.
  4. Use the pyscreenflow71 CSS file in the Harness level. Ensure that all the layouts of the sections are dynamic layouts.
  5. After the screen renders, shrink it to different sizes. The horizontal scrollbar displays and responsiveness does not work.

Root Cause

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.
Suggest Edit

Published December 2, 2021

Did you find this content helpful? Yes No

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us