SA-32257

Summary

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 %.

Resolution

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.