DataSet Width Display Inconsistency/Error

SteveM · November 14, 2019, 4:20pm

Problem: When displaying a dataset, CSS for displaying a full width table does not display properly when the Rows Per Page is set to a value other than 0.

When Rows per Page is 0 and upper limit is 0 table will display full width but not all rows will fit.
When Rows per Page is 0 and upper limit is set (ex. 15) table will display full width but only 15 rows will be displayed (works as expected).
When Rows per Page is set (ex. 15) and upper limit is 0 table will not display full width but will display all rows on multiple screens, each screen a different width.

We are using CMS 2.1.1 Docker image and Windows client V2 - R201. Client machine is a clean install of Windows 10 64 bit with only the Xibo Client installed. This displayed properly in version 1.7.

CSS:

table.DataSetTable {
width:100%;
border-collapse:collapse;
}

tr.HeaderRow {
text-align:center;
padding-top:5px;
padding-bottom:4px;
background-color:#ff8282;
color:#ffffff;
}

tr#row_1 {

}

td#column_1 {

}

td.DataSetColumn {
color:#000000;
background-color:#ff8282;
border:1px solid #000000
}

tr.DataSetRow {
text-align:center;
/* font-size:2.1em; */
font-size:36px;
color:#000000;
background-color:#ff8282;
border:1px solid #000000
padding-top:5px;
padding-bottom:4px;
}

tr.DataSetRowOdd {

}

tr.DataSetRowEven {

}

th.DataSetColumnHeaderCell {
/* font-size:1em; */
font-size:48px;
border:1px solid #000000;
padding:3px 7px 2px 7px;
}

span#1_1 {

}

span.DataSetColumnSpan {

}

In this example there are 21 rows of data.
Screen Shots:
Configuration - Lower Limit: 0, Upper Limit: 0, Rows Per Page: 0

Configuration - Lower Limit: 0, Upper Limit: 15, Rows Per Page: 0

Configuration - Lower Limit: 0, Upper Limit: 0, Rows Per Page: 15
Screen 1

Screen 2

SteveM · November 20, 2019, 3:01pm

Bumping this post up, anyone have thoughts?

Jonatan · November 20, 2019, 6:52pm

It seems this is a browser compatibility issue.
Xibo Player for Windows uses Internet explorer as browser.

Try with another CSS units like vw, vh, em, rem, vmin, vmax.

SteveM · November 20, 2019, 8:06pm

Jonatan,

Thanks for the hint but that does not change anything. I am assuming you mean for the font size. I have changed all fonts to use em and the same problem occurs.

I believe it is in how the page code is setup because if you notice in the screen shots that I provided, they are all using the same CSS template. This problem only occurs when Rows per Page is set to any value other than 0. All other times the pages are displayed correctly.

–Steve

SteveM · November 25, 2019, 3:09pm

So I have checked deeper and found that the call to cycle is what causes the width to change. When the layout is first displayed you can see that it is full width but then is quickly resized.

This is the call that I believe is causing the problem, taken from xibo-dataset-render.js:

if (options.rowsPerPage > 0) {
   $(this).cycle({
      fx: options.transition, 
      timeout: duration * 1000,
      slides: '>table'
   });
}

It seems to auto-fit width, not height. Anyone know how to fit width and auto-fit height?

As stated earlier, this worked fine in 1.7 player.

Steve