Hello!
We design menu for cafe, where it will be 3 columns with items.
We already import all data from Google.Sheets to Xibo Dataset via API.
Design ticker with 3 columns like that:
Region
#1 - simple html with headers.
Region
#2 - region with ticker.
Ticker has code:
<table align="left" border="0" cellpadding="5" cellspacing="0" style="width: 33%;"><tbody><tr>
<td width="8%">[gs_title|27] </span></span></td>
<td width="5%">[gs_weight|28]</span></span></td>
<td width="5%">[gs_kkal|29]</span></span></td>
<td width="5%">[gs_price|30]</span></span></td>
</tr></tbody></table>
Thus we get the output in three columns.
But we have a problem: we need output by rows, not by columns.
How solve this problem?
P.S. I try to use column style property (table width set to 100%):
<article>
<table align="left" border="0" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr>
<td class="gs[gs_id|26]" style="font-size:26px; padding: 5px; color: rgb(255, 255, 255); border-bottom: 1px solid white; text-align: left;" width="55%">[gs_title|27]</td>
<td width="15%">...
<td width="15%">...
<td width="15%">...
</tr></tbody>
</table>
</article>
And style:
article {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
}
But system show crasy things like this:
Table start to fill from central column!
Table don’t wrap;
TD fillng show in first column:
td.gs0:nth-child(1n+1) {
background: #6666ff ;
border: 0px;
font-weight: bold;
}
TD border show in third column…
Peter and Alex! Please help to solve this problem!
I think that not only I interested in how to display 2 or 3 columns of data in the Ticker.
alex
November 28, 2017, 4:56pm
3
I don’t know the answer to your problem. It looks like a CSS styling issue, and I’m not a CSS developer, so I’m afraid I can’t help you.
Is where any way to display table with wrap on 2, 3 or 4 columns?
At now I see just one way: import data into 3 “datasets-ticker” (left, cental and right) with offset.
Like 1-30 rows into first, 31-60 to second,… etc
alex
November 29, 2017, 8:09am
5
I don’t think tables can break and wrap like that. You certainly could use three dataset widgets, with a fixed number of rows and an offset to do that yes.
I try to write simple HTML and put it on server. It work perfect.
Problem in Ticker.
<head>
<style type="text/css">
article {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
}
td.gs1:nth-child(1n+1) {
background: #6666ff;
border: 0px;
font-weight: bold;
}
</style>
</head>
<html>
<article>
<table align="left" border="0" cellpadding="5" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: left;" width="55%">[gs_title|27]</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">[gs_weight]</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">[gs_kkal]</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">[gs_price]</td>
</tr>
<tr>
<td class="gs1" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: left;" width="55%">28]</td>
<td class="gs1" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs1" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs1" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
</tr>
<tr>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: left;" width="55%">29]</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
</tr>
<tr>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: left;" width="55%">30]</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
</tr>
<tr>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: left;" width="55%">31]</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
</tr>
<tr>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: left;" width="55%">32]</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
</tr>
<tr>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: left;" width="55%">33]</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
</tr>
<tr>
<td class="gs1" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: left;" width="55%">34]</td>
<td class="gs1" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs1" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs1" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
</tr>
<tr>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: left;" width="55%">35]</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
<td class="gs0" style="font-size:26px; padding: 5px; color: black; border-bottom: 1px solid blue; text-align: center;" width="15%">...</td>
</tr>
</tbody>
</table>
</article>
</html>
alex
November 29, 2017, 8:24am
7
The Player just uses Internet Explorer 11 to render the output, assuming you have the correct registry keys in place on your Player.
Xibo doesn’t render HTML itself at all, so your code needs to work on that browser engine for it to be displayed properly.
There’s a bug in the 1.8.2 installer that means the keys are not always added to the registry in the correct place. You should check they are in the correct location.
This information is applicable to versions earlier than 1.7.8
Since version 1.7.8, the installer makes this change for you as part of the installation process. It assumes Internet Explorer 11 is installed, but will gracefully degrade if that isn’t the case. These notes are left here should you wish to set a specific version of Internet Explorer to use manually.
The Windows .net client uses the .net Browser control - which defaults to using the installed version of Internet Explorer in IE7 stan…
I test simple HTML on Chrome and IE 11 - work fine.
Just now test code in Embedded module - also work fine.
But Ticker works wrong.
Hello Alex!
I am still waiting for answer.
Please check - why “Embedded module” work fine with Column style, but Ticker is not.