How do I create headings that stay aligned with the repeating group columns?

[lmoreau]

Hi everyone,

Really basic question here but I’m stuck and can’t seem to find this in the help. If I create a repeating list, how do I create text headings for the columns but have them stick to the actual column, so that when I resize etc they stay aligned? Here’s what I mean, this is in the editor:

Account Name and Billing Address are lined up properly. But when I preview I get this:

Trying to figure out how to keep the headings in line with the text on each column but wasn’t sure what I’m doing wrong!

[andrewgassen]

The trick I always do is to bake the header into the repeating group cell, but hide it if the current cell is not the first cell

[lmoreau]

Thanks that seems to work! Bit clunky but serves the purpose.

[mebeingken]

Hey @lmoreau

Welcome to Bubble!

Another option is to match the settings of your header group, to that of the rg.

For example,

a repeating group:

And the header group:

And the column 1 header:

And column 1 value:

Just make sure everything matches up (ie. fixed width, responsive, width, x coordinates, etc.) both from header group to repeating group, but then also the column headers with the rg values.

You end up with this:

The method from @andrewgassen is legit as well…just another option to help you meet your exact needs.

---

Looking to accelerate your app development?

Development of Advanced Apps at https://uniqueideas.com or schedule a free intro session

Ken Truesdale
LinkedIn

[keith]

@mebeingken is correct.

[harris]

This is for sure the easiest way to do this, highly recommend.

PS As a hack, if you have icons in your repeating group—but not in your header—you can re-create them in the header and then hide them using Conditionals like When this icon is visible and then changing the icon color to match the background (e.e. #FFFFFF)

[Rob_07]

H ow do you make this work with the new engine?