Forum Academy Marketplace Showcase Pricing Features

RG header alignment

I’m trying to find a valid solution to build a table with the repeating group but after also consulting various forum articles I’m really frustrated.
For me it is inexplicable how a powerful tool like bubble does not have preconfigured elements of this type.
Has anyone found a solution?

If you’re asking how to make the header group element align with the RG content, just make sure they all have the same layout settings and they will align…

As they’re not currently aligned, you must have different layout settings for the header group and elements, compared to the RG and elements inside it…

So just be sure to set them all the same… feel free to share some screenshots if you’re not sure where you’re going wrong…

Hi Adam, thanks for reply.
I set the same alignment type for the header and content group Maybe the settings of the internal elements are incorrect?
Do I have to put something in the minwith / maxwith?
At the time I had tried setting maxwidth to 100% for all elements

As already mentioned by @adamhholmes, each header label needs to have the same dimension settings as its respective content displayed in the RG. That said, and assuming they are already configured like this, I believe that the cause could be the presence of icons on the RG lines and their absence in the header group. This causes the available space to be shared between header and RG elements to be different. One approach to work around this would be to insert an invisible (non-collapsing) element in the header, with the same width as the RG icon group, to compensate and match the available space. I also saw a “check” icon on the first image which is probably visible due to some conditional. This would be one more element to be compensated.

1 Like

Thanks Newed, I solved the problem by setting the width of the last header column equal to that of the options buttons group.
However, I remain of the opinion that within an advanced tool like bubble there should be more advanced control libraries to enhance development!

Alternatively, you can use CSS to match the widths of all corresponding rows of a column.

You’ll need a HTML element in each header’s cell that will generate a style for each row then using Classify (free plugin) you can add classes accordingly.

I’ve got a simple example you can examine here: