I have four repeating groups on my site that have more than one column set, and in all of them I experience the same odd issue.
In this page I have two repeating groups, one with three columns and one with four columns. This is how they look in the editor:
But on the preview they look like this:
As you can see, the last column’s cell is expanding in height and separating the elements in two rows. Those cells are the only ones with two bubble-r-line div elements.
I have already tried the following:
- Encapsulating the content of the cells in group elements
- Positioning the elements as far of the right border as possible (because I thought it might be an issue with the scrollbar)
- Using other Layout Styles, like full list, that don’t have a scrollbar
- Making elements smaller
- Making the repeating group wider
- Using less columns (the issue persists with only two columns., one column works fine)
- Messing around with elements dynamic width (max and min widths) and other settings.
- Removed the icons in both RG cells. As long as there are two or more elements in the cells, no matter what type of element it is (two text elements for example) the last column is divided in two rows.
Just to show that spacing doesn’t seem to be the issue, here is an ultra wide, two column repeating group set as full list:
If someone can help me guiding me on how I can stop this from happening I would appreciate it. I might be doing something wrong or this might be a well known issue, I was not able to find much online tho (maybe I didn’t use the correct keywords). This seems like something that many people would have noticed by now so I am guessing is might be something with my project or something I did. Any help is highly appreciated.
EDIT: I just tried to replicate the issue in another project I have and was not able to, making this very confusing…