Ticker multicolumn layout


#1

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]&nbsp;</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:

  1. Table start to fill from central column!

  2. Table don’t wrap;

  3. TD fillng show in first column:

    td.gs0:nth-child(1n+1) {
    background: #6666ff;
    border: 0px;
    font-weight: bold;
    }

  4. TD border show in third column…


#2

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.


#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.


#4

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


#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.


#6

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>

#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.


#8

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.


#9

Hello Alex!
I am still waiting for answer.
Please check - why “Embedded module” work fine with Column style, but Ticker is not.