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.
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;
}
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:
Then you add the CSS you want to the main page’s “Page HTML Header”. But the CSS between … tags. Here is an example:
