Trouble with Custom "Table.XML" with Google Spreadsheet Gadget

  • 1
  • Question
  • Updated 4 years ago
  • Answered
Well, admittedly, I'm the opposite of an expert CSS and XML. I can basically tell you what the acronyms stand for, and little else.

I've got a spreadsheet I'm using with the Google Spreadsheet Gadget (really cool by the way). I notice that the layout of the table seems sporadic (some columns seem larger than others in my presentation, even though there isn't even data below the column headers.)

So, I'm attempting to go the custom XML route. I have edited the XML file, am hosting it on the web, and pointing the presentation gadget to the proper URL. Unfortunately, when I preview, the preview just thinks for a minute while trying to load this gadget, then basically gives up, and there's just a blank space where my gadget should be.

I presume it's because there's some problem with my XML file. I'm only interested in pulling info from columns A-H, and did my best to adjust the code accordingly. Here's what I currently have, which isn't working. Any insight would be greatly appreciated. At the end of the day, I just want my columns and data to be aligned and centered, and if there's an easier way to do this, I'd LOVE to know.

Thanks,

Code Below:
----------------

<![CDATA[
body {
background: transparent;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
}
table {
border-collapse: collapse;
}
th, td {
text-align: center;
padding-left: 10px;
padding-right: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#data {
width: 100%;
height: 100%;
}
.page {
width: 100%;
}
.nowrap {
white-space: nowrap;
}
/* Color Conditions:
changeUpIncrease - Change Up Green Down Red - Styling for Change Up Green
changeUpDecrease - Change Up Green Down Red - Styling for Change Down Red
changeDownDecrease - Change Down Green Up Red - Styling for Change Down Green
changeDownIncrease - Change Down Green Up Red - Styling for Change Up Red
valuePositivePositive - Value Positive Green Negative Red - Styling for Value Positive Green
valuePositiveNegative - Value Positive Green Negative Red - Styling for Value Negative Red
valueNegativeNegative - Value Negative Green Positive Red - Styling for Value Negative Green
valueNegativePositive - Value Negative Green Positive Red - Styling for Value Positive Red */
.changeUpIncrease, .changeDownDecrease, .valuePositivePositive, .valueNegativeNegative {
color: green;
}
.changeUpDecrease, .changeDownIncrease, .valuePositiveNegative, .valueNegativePositive {
color: red;
}
/* Column A */
.a {}
/* Column B */
.b {}
/* Column C */
.c {}
/* Column D */
.d {}
/* Column E */
.e {}
/* Column F */
.f {}
/* Column G */
.g {}
/* Column H */
.h {}
/* Over-ride the Heading Font and Data Font. */
.heading_font-style {}
.data_font-style {}
]]>

<![CDATA[
<div id="header">
<table>
<tr class="nowrap heading_font-style">
<th>Name</th>
<th>Logo</th>
<th>Description</th>
<th>QR Code</th>
</tr>
</table>
</div>
<div id="scrollContainer">
<table class="page">
<tbody>
<tr class="separator repeat item data_font-style">
<td class="a"></td>
<td class="b"></td>
<td class="c"></td>
<td class="d"></td>
<td class="e"></td>
<td class="f"></td>
<td class="g"></td>
<td class="h"></td>
</tr>
</tbody>
</table>
</div>
]]>
Photo of Kevin Till

Kevin Till

  • 928 Points 500 badge 2x thumb

Posted 6 years ago

  • 1
Photo of Donna Peplinskie

Donna Peplinskie

  • 7,142 Points 5k badge 2x thumb
Hi Kevin,

Although you've changed the layout file to show data from Columns a - h, you haven't added the same number of headings. I'm talking about this portion:


<th>Name</th>
<th>Logo</th>
<th>Description</th>
<th>QR Code</th>

There must be one heading per column, or 8 in your case.

Thx.
Photo of Kevin Till

Kevin Till

  • 928 Points 500 badge 2x thumb
Thank you Donna!
Photo of Jeff S.

Jeff S.

  • 264 Points 250 badge 2x thumb
Hi,

I was trying to use the Table.XML from examples here: https://code.google.com/p/risegadgets/source/browse/trunk/GoogleSpreadsheetV2/Layouts/Table/Table.xm...

But my display showed nothing. I didn't change anything for the xml file. 

I was only able to get a basic customized layout working when I saved the layout as .html file. 
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Qifeng,

The google spreadsheet gadget is no longer supported. The google spreadsheet widget does support custom layouts, see it's documentation here.
Photo of Jeff S.

Jeff S.

  • 264 Points 250 badge 2x thumb
Oh. I didn't notice the difference between gadget and widget. Anyway, I was talking about the widget then cause that's what I am using right now. I got it working by using an html file as customized layout. However, if I feed in the xml sample from the documentation that you listed above, it won't display.
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Qifeng,

I believe that .xml file was designed to work with the older gadget.
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Qifeng,

I believe that .xml file was designed to work with the older gadget.
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Qifeng,

I believe that .xml file was designed to work with the older gadget.