Forum Academy Marketplace Showcase Pricing Features

Responsive engine alignment repeating group

Need help Responsiveness
#1

So this cause me a headache for a few hours… with the new responsive engine and repeating groups header alignment…

I thought I would post so it may help anyone else that is scratching their head as to why their tables are not aligning…

IF you de select ‘fixed number of rows’, and you have enough data to make the scroll bar appear to the right then your header will be thrown off by a number of pixels frustratingly, took me a while to figure out what was going on.

it throws off the alignment by 16px

align 1
align 1807×425 60.1 KB

align 2
align 2806×422 59.3 KB

Update: this is also an issue when there are not enough items to render a scroll bar the 16px are removed, so IF you cater from it in the design expecting there to eventually be more items then you will have a offset headings.

Not sure if anyone else has a way to resolve this?

1 Like
#2

Is that header NOT part of the repeating group? I wonder if that happens only if it’s outside the RG.

Also, couldn’t you just get rid of the header altogether? The information inside the rows is descriptive enough. Maybe the User Role could potentially use some clarification, a little “i” icon that shows something when hovered.

#3

hey, thanks for the tips.

The header is not part of the RG, I wasn’t aware I could make it part of it easily and not make the first item somewhat more squashed than the rest or the rg items.

To be honest I probably could remove the header but the screen shot are only of one rg table, I have quite a few others for different data sets that may need descriptive header elements.

I suppose what I could do is create a custom state on page load that says if RG items are more that X (the number that creates the scroll bar on the page) then use a conditional to add the extra padding - seems a bit much, but possible :slight_smile:

Thanks for helping me rethink it!

#4

:+1:

FYI: for the header inside the RG:

  • just make sure it’s a separate group than the row’s content
  • each and every item in both header and row must have the same responsive settings. For instance, the Status header and each row’s status tag should have the same width and responsive settings.
  • make sure the header group is set to collapse when hidden
  • the conditional rule is: when this index is not 1, then hide it.
1 Like
#5

cool, thanks I will give that a shot.

I am new to Bubble (5 weeks), but picking it up fast and I love it… appreciate your advice.