Horizontal scrollbar missing

hello,
I just installed the xWiki and imported the topics from my old wiki to xWiki now. If I create tables with more columns than my screen can display, I miss the horizontal scrollbar to the the complete table. If I zoom, I can see all columns, but the fond size is to small to read them. How can I display the horizontal scrollbar? Vertical is working. I’m using the current stable version 12.6.1

Could you please paste a screenshot so that we see what you mean exactly?

Maybe 2 screenshots: one from your previous version and one with 12.6.1.

Thanks

2020-09-04 21_31_32-

Hello xmassol,
This is a screenshot of the current wiki. The older one was on confluence. So not comparable

ok I hadn’t understood you were migrating content from another wiki system to XWiki (I thought you were upgrading XWiki versions).

So I’ve tested it and it works fine. The columns are resized to always fit the maximum width of the screen. See for example:

Screenshot 2020-09-07 at 09.12.36

Could you go in source mode when editing and copy paste your content here? You probably have some CSS styles to prevent that or something like that.

Thanks

So I think the reason why the table doesn’t fit in the viewport is simply because it cannot :wink: There’s too much data and the browser is not able to lay it out to fit the viewport. However it does add a horizontal scrollbar (this is standard and done by the browser, XWiki has no control over this, you’ll have that for any web site).

Could you tell me what you had in Confluence? Maybe some screenshots to show the differences?

Side note: I’m on mac and with my magic mouse I can have the mouse pointer anywhere inside the table and swipe left or right on the mouse to move the table left or right.

Just stumbled upon the same “issue”. My first approach did not work and I was a bit quick to post … my second approach does not work either, but maybe/probably because of another reason …Setting the table property:

Table; Properties; Tab “Advanced”; Field “Style”, “overflow:auto;”

did in fact nothing … I just didn’t realized this on first :wink:

Well, the second approach was more HTML “style”, using the HTML Macro. Not much more professional either … adding the macro before and after the table creating a DIV.

{{html clean="false"}}
<div style="width:100%; overflow-x:scroll;">
{{/html}}

== Table Content Here ==

{{html clean="false"}}
</div>
{{/html}}

This does work very nice - until you ever open that page with the CKEditor … this will delete your table and the second HTML Macro with the “”. Everything between the two will be gone … 12.5.1 of xWiki …

@mflorea : is this expected or might this be a bug?

I have the same problem with horizontal scroll…

Scroll exist, but it exist only of the bottom of the page.

And if after the table exist too much another information (texts/tables/…), users don’t see the scroll bar
Because they search it just under the every large table instead the bottom of the page

In Atlassian scroll exist under each large table:

Related issue: Loading...

Feel free to open a ticket on our jira to report this usability issue :wink:

Instead of {{html}} …you can just use '(% style=“… " %)((( … )))” which generates a div and the table is safe when using the WYSIWYG-editor

example:

(% style="width:100%;overflow-x:scroll" %)
(((
|=Header |=Header|=Header |=Header |=Header|=Header |=Header |=Header |=Header |=Header |=Header|=Header |=Header |=Header|=Header  |=Header |=Header |=Header |=Header |=Header|=Header |=Header |=Header|=Header |=Header |=Header|=Header 
| 11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| 11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
| 11111  | 22222 | 333333 | 444444 | 555555| 666666 | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999 | 11111  | 22222 | 333333 | 444444 | 555555| 666666  | 777777 | 888888 | 999999
)))

You will get a horizontal scroll bar below the table.

1 Like

It doesn’t work with my table :frowning:

(% class="table-bordered" style="overflow-x:scroll; width:100%" %)
(% class="info" %)|(% colspan="12" style="text-align:center" %)(% colspan="12" style="text-align: center;" %)
(((
=== Действующие акции ===
)))
|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
**Скидка в crm**
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
Промо_твинтернет_Славянка
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
скидка_50_процентов
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
скидка_тв_уссурийск_12мес
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
скидка_30_процентов
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
Приведи друга
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
Сохранение баланса
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
-
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
-
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
подключка_сайт
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
скидка_10_процентов
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
промо_твинтернет_100 

промо_интернет_100_2021
)))
|=(% style="text-align: center;" %)(% style="text-align: center;" %)
(((
Город / Акция
)))|=(% style="text-align: center;" %)(% style="text-align: center;" %)
(((
Промо_Твинтернет 60
)))|=(% style="text-align: center;" %)(% style="text-align: center;" %)
(((
(ТВ)интернет 100 со скидкой 50% навсегда
)))|=(% style="text-align: center;" %)(% style="text-align: center;" %)
(((
Год бесплатного ТВ
)))|=(% style="text-align: center;" %)(% style="text-align: center;" %)
(((
Скидка 30% для сотрудников ТЭЦ 
)))|=(% style="text-align: center;" %)(% style="text-align: center;" %)
(((
Приведи друга
)))|=(% style="text-align: center;" %)(% style="text-align: center;" %)
(((
Сохранение баланса
)))|=(% style="text-align: center;" %)(% style="text-align: center;" %)
(((
Месяц ТВ в подарок
)))|=(% style="text-align: center;" %)(% style="text-align: center;" %)
(((
"Утилизация"
)))|=(% colspan="1" style="text-align: center;" %)(% colspan="1" style="text-align: center;" %)
(((
Скидка 10% на 1й месяц
)))|=(% colspan="1" style="text-align: left;" %)(% colspan="1" style="text-align: left;" %)
(((
Скидка 10% Альянс
)))|=(% colspan="1" style="text-align: center;" %)(% colspan="1" style="text-align: center;" %)
(((
Промо_(ТВ)интернет 100

200/200/200/700
)))
|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
Владивосток
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% colspan="1" style="text-align:left" %)(% colspan="1" style="text-align: left;" %)
(((
(% style="color:#0000ff; text-align:center" %)**Исх. продажи**
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
(% style="color:#0000ff; text-align:center" %)**Исх. продажи**
)))
|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
Артем
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% colspan="1" style="text-align:left" %)(% colspan="1" style="text-align: left;" %)
(((
(% style="color:#0000ff; text-align:center" %)**Исх. продажи**
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
(% style="color:#0000ff; text-align:center" %)**Исх. продажи**
)))
|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
Угольная +
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% colspan="1" style="text-align:left" %)(% colspan="1" style="text-align: left;" %)
(((
(% style="color:#0000ff; text-align:center" %)**Исх. продажи**
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
(% style="color:#0000ff; text-align:center" %)**Исх. продажи**
)))
|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
Находка
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% colspan="1" style="text-align:left" %)(% colspan="1" style="text-align: left;" %)
(((
(% style="color:#0000ff; text-align:center" %)**Исх. продажи**
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
(% style="color:#0000ff; text-align:center" %)**Исх. продажи**
)))
|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
Уссурийск
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% colspan="1" style="text-align:left" %)(% colspan="1" style="text-align: left;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))
|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
Славянка
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#0000ff; text-align:center" %)**Исх. продажи**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% style="text-align:center" %)(% style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
(% style="color:#008000; text-align:center" %)**Действует**
)))|(% colspan="1" style="text-align:left" %)(% colspan="1" style="text-align: left;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))|(% colspan="1" style="text-align:center" %)(% colspan="1" style="text-align: center;" %)
(((
(% style="color:#ff0000; text-align:center" %)**Недоступен**
)))

The surrounding “(((” … “)))” are missing, which have to be entered with the WIKI-Editor

(% class="table-bordered" style="overflow-x:scroll; width:100%" %)
(((  <<< before the table
(% class="info" ....
...
)))   <<<< behind the table

It’s works! Thanks!

One more hint:

You can also solve the problem using a StyleSheetExtension and define a css class for the tables.

Example

.scrolltab { width:30%; overflow-x:scroll; display:block} 

creates a scrollbar if you assign the class “scrollbar” (e.g. with the WYSIWIG editor) to the table.

“display:block” is required, otherwise it will not work.
“display:block” makes the surrounding (((…))) div generating structure unnecessary.

A bit “dirty” construction like

{{velocity}}
#set($discard=$xwiki.linkx.use("data:text/css,.scrollbar { width:30%; overflow-x:scroll; display:block} " , { 'type': 'text/css', 'rel': 'stylesheet'}))
{{/velocity}}

creates “inline” in the source code a style sheet entry.