New Table Element Unwanted Horizontal Scrolling

I am using the new table element. When I use a condition to hide a column, the table gets a horizontal scroll bar at the bottom.
If I remove the condition so that the column is not hidden, everything displays as normal and there is no horizontal scroll.
All column widths are allowed to resize as they wish. There are no min or max widths forcing them. And the content in the columns is not pushing the table.
The scrollbar only scrolls a couple px left and right. There is no need for it.
It appears no matter what size the browser window is, and no matter what size its parent container is.

To reproduce:
I have reproduced the problem on a new blank page doing the following:
On an empty page, add a table element.
Add 5 columns (I haven’t tested every number of columns yet)
Put a text element in each column.
Click a column header to select a column.
Uncheck “this element is visible on page load”
Preview the page. You will have a horizontal scrollbar.
Replace the check mark so that all columns are visible. There will be no scrollbar.

Screen recording for demonstration: Loom | Free Screen & Video Recording Software | Loom

2 Likes

I have posted this as a bug to Bubble. Just posting it here in case anyone else encounters it.
My solution is to use the Classify plugin to add a class like this:
.noscroll {
overflow: hidden !important;
}

I am having this issue too - is it an html element you’ve put on your page with that code? Can you share how you did that?

You am using the Classify plugin. You can learn about how to use it here: 🔥 Classify: A tiny plugin that brings CSS power to Bubble

Looks like I have it already installed, but it’s not called “Classify” in the elements menu. Do you know what it’s called there? I have several plugins installed but the name in the menu usually differs from the name of the plugin, so it’s hard to sort out what’s what sometimes.

There is no menu item for it. You use the syntax given by their documentation in the ID Attribute for the element you want to target… Here is an example of one of mine:

Screenshot from 2023-09-06 18-03-00

Then you add the CSS you want to the main page’s “Page HTML Header”. But the CSS between … tags. Here is an example:

That helps a lot! Thank you!

Has anyone found the solution that doesn’t require adding HTML tags to hide the scrollbar or using plugins?

According to Bubble support, the scroll bars are expected behaviour. They sent me this

“It looks like the behavior with the scrolling is working as expected due to the hidden column.”

I have no idea why this would be expected behaviour, and I did not push it further.

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.