Horizontal scroll bars are displayed on tables after publishing

[Nicolás]

Hi,

For some reason, horizontal scroll bars are appearing in tables after being published. When editing the page, no scroll bars show up but after publishing there they are. Also, if I collapse the side bar, the scroll bars go away.

Thanks in advance!

Editing:

Published:

[Jamie Counsell]

Having the same issue. This is not a feature of responsive websites. We have tables with no content in them, and that display fine in the editor, but not when published.

[Robert Gates]

I am struggling with this too. I don't see a horizontal scroll bar when in the editor. The chart only has two words per row and doesn't need a horizontal scroll but it appears when it is published.

[Liz D]

This issue has been driving me crazy all year, and it seems like it has actually gotten worse recently.

Even tables on previously published pages that used to display just fine now suddenly have scrollbars. There was one day a few weeks ago where literally overnight, dozens of tables had new scrollbars... even though those pages hadn't even been edited in weeks or months, all the tables got scrollbars for no reason! Ever since then, it has been a nightmare to use tables. Doesn't matter what I do or how I try to fix it, these scrollbars haunt me.

It's unpredictable, too. I've tried to fix pages by deleting the affected table, remaking the entire thing (a waste of time!), and then republishing the page... 80% of the time, the table will have scrollbars all over again. And, randomly, a table will decide on its own to become ridiculously wide and I have zero control over it.

It's ruining so much of our technical documentation by making things hard to read, and it just looks bad. It's so bad and so frequent that I loathe working on any pages that need a table. This is especially frustrating because I utilize things like Page Properties a lot, which requires a table just to function.

[Daryl Krzewinski]

By sheer accident I think found a workaround for this issue - at least until Atlassian fixes the core problem.

In my case every single table that inserted the unwanted scroll bar I would simply click the "+" at the top-left of the table (Insert Colum), which should create a blank column to the left of your current leftmost column. Then, click the "delete column" arrow in the blank column you just created, and *poof* the horizontal scroll bar is gone, and your table is unscathed.

I've tried it on about a dozen tables and has worked 100% (so far). Annoying to have to do this, but it's minimal effort and will suffice until the "real" fix comes.

[Carole Girard]

All our tables are afflicted with the scroll bar. The work around, to my complete amazement, also works in our environment....   Hoping it will hold in time.

Thanks

[Austin R. Snider]

Also works in our environment. Thanks Daryl!

[Daryl Krzewinski]

@Carole Girard @Austin R. Snider 

Glad it helped! The scroll bars were frustrating me enough that I just started trying stuff to see what kind of result I got and was amazed the create/delete action fixed it so quickly and so easily. 

[Michael Proctor]

I found I had to copy the cell content from the column which seemed to cause the issue and add a new column and paste in, then delete the original column.

It is like the column gets stuck with some width attributes at some point.

[Chris Schofield]

Thank you @Daryl Krzewinski! That fixed the issue for me as well and seems to be working after publishing.

[Dobry Kolacz]

You are a hero @Daryl Krzewinski 

[Tami Checkoway]

This table issue makes confluence impossible to use for specs...which is kinda critical to the point of Confluence! Can we please get an ETA on a fix for this? 

[Vincent Azara]

Yep, it's completely ruined the user experience for several use cases.

[Gilles Lesire]

It is obvious the Atlassian developers are not reading this thread. Can we file bug reports somewhere? Because this is a huge inconvenient bug that should be resolved. 

[Gilles Lesire]

I created a bug report, with a short summarization of the issue and a link to this community page. I hope they will finally pick it up. 

[Laura Rusenstrom]

Hi @Gilles Lesire , do you have a link to the bug report? I'd like to add my vote to it, for what good it will do. It's one thing for me to be frustrated with this problem, but now I have users coming to me complaining about scroll bars on empty tables.

[Gilles Lesire]

They simply closed it

[Laura Rusenstrom]

[Heather Blue]

@atlassian-qe not sure who to tag here but can this please be reopened and looked at? A table can be empty and will still generate a horizontal scroll bar even when you expand the table to the max width across the page, and I don't see a way to access the horizontal scroll bar unless you scroll all the way to the bottom of a table, which makes it very challenging to use tables.

[Vincent Azara]

This needs to be looked at again properly by the team @ Atlassian

[Adam Oldham]

@Vincent Azara 

I think the problem is more simple than Atlassian or the users here are making in out to be.

Problem seems to be editing any page with existing tables by adding a new table or even adding a row to an existing table.

What I've seen is that the and layout are optimized for the left navigation bar being minimized.  Once the navigation bar is minimized (folded left) the reactive page adjusts and all scroll bars are gone every time.

This is a layout bug with the reactive design in which Confluence creates tables with he assumption of the maximum size based on the current editor's screen/view size.  Preview works, edit works.  Publish screws up as soon as it's displayed because the nav panel is open in most cases.

[Brigt Agnar Mikkelsen]

Try to add an HTML macro and add style

I found that in the innerCell class, overflow-x is set to auto, override it and set it to hidden like this:

[Gilles Lesire]

After persistently reporting this bug to Atlassian, they finally flagged it as a confirmed bug.

https://jira.atlassian.com/browse/CONFCLOUD-68891

[Thomas Alisi]

thanks for sharing, I've dropped a comment in the bug in the hope someone will notice.

[Matt DeVries]

Same here.

[Gilles Lesire]

I have the same issue. Even for tables where I would just want 2 columns with a 50-50% layout, I get scrollbars. And unless I awkwardly adjust the width of all columns (causing tables to not look similar anymore), scrollbars keep appearing. 

[Gilles Lesire]

I've been editing quite some pages and this is the behavior I noticed.

This will help you recreate the issue:

Adding a new table to a new page -> No scroll bars
Editing a page, without touching the table -> No scroll bars
Adding a new table to a page that already had other tables -> Scrollbars on all previous tables, but not on the new table.

Seems like adding a table to a page somehow messes up the width of other tables. 

[Robert Gates]

@Gilles Lesire Great info - very helpful. I wish this didn't happen but it is great to have some framework for what causes it.

[Liz D]

Within the last month or so, even this seems to no longer be predictable. A few weeks back, literally overnight, dozens of our pages that hadn't even been edited in months suddenly had scrollbars.

Now, none of it makes sense anymore. Even if I add a new table to a new page and I don't even touch it, it'll randomly have scrollbars after publishing. I feel like I've entered the twilight zone.

[Cathy Madore]

Do we have a fix yet for this issue? I'm literally in tears here trying to get this freaking thing to work. I was so relieved to find that I'm not alone in this frustration. 

[Liz D]

@Cathy Madore We should start a support group or something. I see scrollbars in my nightmares now.

[Gilles Lesire]

No it still has not been patched, more than a year later....
I just let the scrollbars sit there and am waiting for that patch to finally arrive, which might never arrive. 
But expecting users to just adjust the width on every page for every table, and redo that after every minor page edit (which will cause the scrollbars to reappear) is insane. So Atlassian should fix this ASAP imho. 

[RPT Admin]

Jumping on this question to report that I'm having the same issue when I convert pages to the new editor. Anyone found a solution - or even a workaround?

I have hundreds of pages to convert. :( 

[Diego]

Hello @Nicolás !

The scroll bars show because the pages have a reactive nature. When elements inside the page move and occupy more or less space, objects within the page will change.

What you are seeing is exactly that. The scrollbars appear in response to the display area for the page being reduced when the sidebar is expanded.

To avoid that behavior I believe that you could display one table under the other or keep the sidebar closed.

I hope this clarifies the behavior Nicolás! Looking forward to your reply

[Nicolás]

Thanks for your answer @Diego ! What do you mean with displaying one table under the other? Isn't that how it is now?

[Diego]

Hi @Nicolás ! I meant to link you to a page from w3schools but forgot. Here it is:

• [w3schools.com] What is responsive web design

What I meant by “display one table under the other” was that instead of displaying them side by side, each inside a column from a layout, we can place one of the tables under the other.  Doing this, we can try to avoid the scroll bar from showing.

Let us hear from you!

[djordi]

I understand the "reactive nature" of the new editor and appreciate it, despite it not having anywhere near the feature parity of the previous version.

However, it's very clearly bugged. The example above has a table with one column that has a scrollbar appearing. I see the same thing all the time in pages I work on with one or a handful of columns have scrollbars appear for no logical reason.

There is no user on the planet who wants scrollbars to appear in a situation like the one attached or the one above.

[Thomas Epting]

We experience exactly the same problem when using tables in layouts. Interestingly, this was (and still is) not the case for pages that have been edited about 2 weeks ago or earlier. So the issue obviously was fixed and now there is a regression.

[Liz D]

Yea there has definitely been some kind of regression. It has gotten much worse recently. For several weeks now, working with tables has been a nightmare of unpredictably and nonsensical behavior. Even tables that seemed perfectly fine when first published will adopt scrollbars totally randomly. 

Tables in the new editor have always been a little frustrating because they were already a regression compared to the old legacy editor, but now they're nearly unusable.

@Diego 

[Gilles Lesire]

@diego  This bug also occurs when displaying 1 table under another.
Has this issue been reported as a bug or did you just dismiss it? Because we've been waiting for over a year now.

As I explained in other comments, this issue occurs when an the page gets edited, not even touching the table. Even when the table is empty, the scrollbars will appear. On first creation, the table will be fine. Once the page is edited, all previous  existing tables in that page will have scrollbars in all fields, even if they have no content.

[Vincent Azara]

posting here that the issue is still there and it's still a nightmare.

[Carole Girard]

I also have the same problem. But this was not always the case.

And it is also driving me nuts.

@Diego 

[Gilles Lesire]

Time for all of us to just mass report this to Atlassian via the "Send feedback" feature.
The are obviously just ignoring this thread.

[Raj Madhuram]

They took something that was working really well, and in order to make it fancy (and look and feel like medium, etc.) have messed it up.

To make the contents of a table not show a horizontal scrollbar, I was looking for table options, which would have been more intuitive. But I figured if you pull the rightmost border of the table, at some point, it makes it non-responsive and would wrap contents instead of showing a scroll bar. 

[Cerys Hyde]

Having the same issue and it's really frustrating.

In the editor I see no scroll bars. I publish the page, scroll bars appear. I go back into editor, and the scrollbars now show in the editor. I manually adjust the column width to get rid of the scroll bar. I publish the page, scroll bar is gone. 

I could maybe understand the table trying to expand itself to fit a lot of content, and the default action being to do that unless I manually adjust it to be narrower, but I can have tables with content nowhere near the width of the column - scrollbars still appear. There is no reason for the table to decide it needs to be any wider than it was inside the editor view.

[Robert Gates]

Check to make sure you don't have a table inside a table. That was my problem in a few cases.

[Cerys Hyde]

Nope. I have several tables on one page, but none of them sit inside each other.

[Gilles Lesire]

@Robert Gates  That is not even possible in the new editor....

[Angela Sadul]

Also having the exact same issue -- columns are difficult to resize and no matter what I do, the scroll bar appears after I save the page. 

[Annholm Annholm]

@Shannon S @Srinatha T  can someone please do something about this? Numerous users reporting the issue and more than 2 years have passed.

[Srinatha T]

@Annholm Annholm , I will go through this thread and check if I can do something. mean while if you are on a commercial license please open a ticket with support to look into this. 

Thanks,

Srinath T

[Brigt Agnar Mikkelsen]

Try to add an HTML macro and add style

I found that in the innerCell class, overflow-x is set to auto, override it and set it to hidden like this:

[Melissa Kummerow]

Hi Brigt - this works while you're in the page, but it doesn't save the formatting universally.   Have you found a way to make every table respond to this, and when you close out of the HTML Macro?     

In other words:  how do you save the setting so that it saves all across the wiki?

thanks!

[Sudesh kumar]

There was a table and pre formatted text in one cell (where the scroll bar appeared). This happened after I copied and pasted a row from the same table. Even though there was a table and pre (<pre>) element, it was not visible. The following steps revealed it.

Edited the page (by clicking Edit)

copied the contents of the cell (where the scroll bar appeared )and pasted in notepad ..

a lot of elements like the following appeared.... Deleted all of them and put the text back... The scroll bar disappeared.

<col style="width: 188.0px;" /><col style="width: 188.0px;" /><col style="width: 228.0px;" /><col style="width: 120.0px;" /><col sty
le="width: 88.0px;" /><col style="width: 140.0px;" /><col style="width: 103.0px;" /></colgroup><tbody><tr><td class="confluenceTd" style="width: 303.0px;"><pre class="c-mrkdwn__pre">