Issue with Unaltered Canvas Components (Repeating Group) Responsivenes/Spacing

Hello friends!

I’m having an issue with (default/unchanged) Canvas components, demonstrated in the attached pictures. In each, I have added a Standard Horizontal Scroll Data Table to a different page.

Base Case (working as expected): In one picture I have a Standard Page with the Standard Horizontal Scroll Data table. It looks exactly like I would be expect it.

Issue: In the other picture I have a Portal/Dashboard Page with the Standard Horizontal Scroll Data table. It has a lot of whitespace to the right of the dropdown (menufocus). This problem is even worse on bigger screens.


Does anyone know how to solve this and get the white space removed? I’ve been messing around with this for hours.

To reiterate…all I did was use the Canvas Chrome Extension to 1) add a page and 2) add the Standard Horizontal Scroll Data table. No other changes were made to the page.

Thanks for your help!

Hey @davidjlobo! :slight_smile: Thank you so much for flagging this!

I think that this is due to the max-width % of the 860group on the Portal page. On the Portal page, the max-width is higher than the max-width on the standard page. However, Bubble will currently always left-align any elements within a horizontal scroll repeating group which causes the extra white space on the side as the parent group increases in width.

We will definitely see if there may be a different workaround, but in the meantime, I think that the best options would be to either:

  1. Set the max-width of the 860group on the Portal page to 100% or 105% (as it is on the standard page). This will eliminate or reduce that extra white space.

or,

  1. Use the “infinite Columns Horizontal Scroll Data table” instead of the Standard Horizontal Scroll Data Table on the Portal page. The benefit of that block is that you would be able to manually space all of the elements (so that there isn’t any extra white space if the max-width is high). It allows for adding columns in the future if needed. It is almost identical in structure to the horizontal scroll data table, but it is a reusable element to allow for more columns in the future if needed.

Thanks again, David, and sorry about this issue! We’ll definitely see if there may be a different workaround, but please let me know if you have any other questions!

2 Likes

Thanks Faye!!! I will look into this and try it out :slight_smile: