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

Last grid column streched after responsive breakpoint reached



User had configured a repeating grid with responsive UI to drop "Other" columns after the first break-point has been reached. 

Issue is that user encounter is that columns of the remaining grid are not resized properly, the last column is stretched way to much and not in any relation to the remaining columns. 

To stop this, if a blank column is appended in the grid, a huge gap start to come-up after the grid. This behavior persists until user refreshes the browser.

Error Messages

Not applicable

Steps to Reproduce

  1. Configure a repeating grid. Define some secondary and some "other" columns. Make that responsiveness is turned on. 
  2. Define a break-point to drop "other" columns. 
  3. Resize the window so that the break-point is reached. 
    Expected result: the remaining secondary columns have been resized proportionally. 
    Actual result: to review the actual result, please login to below server(open it in MF browser and launch the user portal).

Root Cause

The issue is that in case of Fill 100% width configuration, the last column is given width as "auto". On-load, if certain columns are hidden, their width is not considered in the overall calculation and the visible columns already have a % width calculated while the last column being auto occupies all the rest of the width. Once the browser window is resized and the other columns become visible, the calculation becomes correct and the last column gets a smaller width %.


Fixing this issue will require changes in multiple files and comprehensive testing. 

Perform the following local-change steps:
  1. The columns that have importance as "Secondary"/"Primary", that is, the columns that are not dropped should be stretched appropriately at design time. This is because the design time width is taken into account while calculating the runtime % width of the column. 
  2. Add an empty column to the end of the grid and open the column property panel and add the inline style: display:none; to the last "empty" column.

Published January 17, 2017 - Updated October 8, 2020

Was this useful?

100% found this useful

Have a question? Get answers now.

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

Did you find this content helpful?

Want to help us improve this content?

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