My table has 26 rows, and no matter how I configure the flex containers the last 9 or 10 rows are not visible unless I scroll. I tried using a couple of coordinate containers (nested within a few parent flex containers) but still the vertical scroll bar is needed.
I heard the alarm table has a row height, but how about a normal table?
EDIT:
Another question: Why does the cell not display the rest of the text even though I have expanded the width?
Can you post the table JSON and the data JSON?
What kind of container is the table in?
My first table is nested inside two coords, and several flex. I have messed with the grow, and size basis, font size, etc.
So, I copied the table into a coord view, no nesting and (at least in the designer) I still have to use the scroll bar. Going to test in browser now. And I still need to scroll. I am building this for a tablet, which is approx. 1100 x 800 or something like that.
Table:
[
{
"type": "ia.display.table",
"version": 0,
"props": {
"columns": [
{
"field": "PR_Reading_ID",
"visible": true,
"editable": false,
"render": "auto",
"justify": "auto",
"align": "center",
"resizable": false,
"sortable": false,
"sort": "none",
"filter": {
"enabled": false,
"visible": "on-hover",
"string": {
"condition": "",
"value": ""
},
"number": {
"condition": "",
"value": ""
},
"boolean": {
"condition": ""
},
"date": {
"condition": "",
"value": ""
}
},
"viewPath": "",
"viewParams": {},
"boolean": "checkbox",
"number": "value",
"progressBar": {
"max": 100,
"min": 0,
"bar": {
"color": "",
"style": {
"classes": ""
}
},
"track": {
"color": "",
"style": {
"classes": ""
}
},
"value": {
"enabled": true,
"format": "0,0.##",
"justify": "center",
"style": {
"classes": ""
}
}
},
"toggleSwitch": {
"color": {
"selected": "",
"unselected": ""
}
},
"nullFormat": {
"includeNullStrings": false,
"strict": false,
"nullFormatValue": ""
},
"numberFormat": "0,0.##",
"dateFormat": "MM/DD/YYYY",
"width": "",
"strictWidth": false,
"style": {
"classes": ""
},
"header": {
"title": "Salty",
"justify": "left",
"align": "center",
"style": {
"classes": ""
}
},
"footer": {
"title": "",
"justify": "left",
"align": "center",
"style": {
"classes": ""
}
}
},
{
"field": "Description",
"visible": true,
"editable": false,
"render": "auto",
"justify": "auto",
"align": "center",
"resizable": false,
"sortable": false,
"sort": "none",
"filter": {
"enabled": false,
"visible": "on-hover",
"string": {
"condition": "",
"value": ""
},
"number": {
"condition": "",
"value": ""
},
"boolean": {
"condition": ""
},
"date": {
"condition": "",
"value": ""
}
},
"viewPath": "",
"viewParams": {},
"boolean": "checkbox",
"number": "value",
"progressBar": {
"max": 100,
"min": 0,
"bar": {
"color": "",
"style": {
"classes": ""
}
},
"track": {
"color": "",
"style": {
"classes": ""
}
},
"value": {
"enabled": true,
"format": "0,0.##",
"justify": "center",
"style": {
"classes": ""
}
}
},
"toggleSwitch": {
"color": {
"selected": "",
"unselected": ""
}
},
"nullFormat": {
"includeNullStrings": false,
"strict": false,
"nullFormatValue": ""
},
"numberFormat": "0,0.##",
"dateFormat": "MM/DD/YYYY",
"width": "",
"strictWidth": false,
"style": {
"classes": ""
},
"header": {
"title": "",
"justify": "left",
"align": "center",
"style": {
"classes": ""
}
},
"footer": {
"title": "",
"justify": "left",
"align": "center",
"style": {
"classes": ""
}
}
},
{
"field": "Range_Low",
"visible": true,
"editable": false,
"render": "auto",
"justify": "auto",
"align": "center",
"resizable": false,
"sortable": false,
"sort": "none",
"filter": {
"enabled": false,
"visible": "on-hover",
"string": {
"condition": "",
"value": ""
},
"number": {
"condition": "",
"value": ""
},
"boolean": {
"condition": ""
},
"date": {
"condition": "",
"value": ""
}
},
"viewPath": "",
"viewParams": {},
"boolean": "checkbox",
"number": "value",
"progressBar": {
"max": 100,
"min": 0,
"bar": {
"color": "",
"style": {
"classes": ""
}
},
"track": {
"color": "",
"style": {
"classes": ""
}
},
"value": {
"enabled": true,
"format": "0,0.##",
"justify": "center",
"style": {
"classes": ""
}
}
},
"toggleSwitch": {
"color": {
"selected": "",
"unselected": ""
}
},
"nullFormat": {
"includeNullStrings": false,
"strict": false,
"nullFormatValue": ""
},
"numberFormat": "0,0.##",
"dateFormat": "MM/DD/YYYY",
"width": "",
"strictWidth": false,
"style": {
"classes": ""
},
"header": {
"title": "Std. Low",
"justify": "left",
"align": "center",
"style": {
"classes": ""
}
},
"footer": {
"title": "",
"justify": "left",
"align": "center",
"style": {
"classes": ""
}
}
},
{
"field": "Range_High",
"visible": true,
"editable": false,
"render": "auto",
"justify": "auto",
"align": "center",
"resizable": false,
"sortable": false,
"sort": "none",
"filter": {
"enabled": false,
"visible": "on-hover",
"string": {
"condition": "",
"value": ""
},
"number": {
"condition": "",
"value": ""
},
"boolean": {
"condition": ""
},
"date": {
"condition": "",
"value": ""
}
},
"viewPath": "",
"viewParams": {},
"boolean": "checkbox",
"number": "value",
"progressBar": {
"max": 100,
"min": 0,
"bar": {
"color": "",
"style": {
"classes": ""
}
},
"track": {
"color": "",
"style": {
"classes": ""
}
},
"value": {
"enabled": true,
"format": "0,0.##",
"justify": "center",
"style": {
"classes": ""
}
}
},
"toggleSwitch": {
"color": {
"selected": "",
"unselected": ""
}
},
"nullFormat": {
"includeNullStrings": false,
"strict": false,
"nullFormatValue": ""
},
"numberFormat": "0,0.##",
"dateFormat": "MM/DD/YYYY",
"width": "",
"strictWidth": false,
"style": {
"classes": ""
},
"header": {
"title": "Std. High",
"justify": "left",
"align": "center",
"style": {
"classes": ""
}
},
"footer": {
"title": "",
"justify": "left",
"align": "center",
"style": {
"classes": ""
}
}
}
],
"dragOrderable": false,
"rows": {
"style": {
"fontSize": 10
}
},
"pager": {
"bottom": false
}
},
"meta": {
"name": "Table"
},
"position": {
"width": 600,
"height": 800
},
"custom": {},
"propConfig": {
"props.data": {
"binding": {
"type": "property",
"config": {
"path": "parent.custom.data"
}
}
}
}
}
]
Data:
[
{
"PR_Reading_ID": 1,
"Description": "150 H.P. Coater and PS DI Filt",
"Range_Low": 9.5,
"Range_High": 10.5
},
{
"PR_Reading_ID": 2,
"Description": "150 H.P. Coater and PS DI Supp",
"Range_Low": 80,
"Range_High": 110
},
{
"PR_Reading_ID": 3,
"Description": "40 H.P. Mechanical Filter Diff",
"Range_Low": 0,
"Range_High": 8
},
{
"PR_Reading_ID": 4,
"Description": "50 H.P. Inlet Pressure (Large ",
"Range_Low": 7,
"Range_High": 20
},
{
"PR_Reading_ID": 5,
"Description": "50 H.P. Inlet Temperature (Lar",
"Range_Low": 61,
"Range_High": 83
},
{
"PR_Reading_ID": 6,
"Description": "50 H.P. Outlet Pressure (Large",
"Range_Low": 4,
"Range_High": 12
},
{
"PR_Reading_ID": 7,
"Description": "50 H.P. Outlet Temperature (La",
"Range_Low": 70,
"Range_High": 91
},
{
"PR_Reading_ID": 8,
"Description": "150 H.P. Inlet Pressure (Large",
"Range_Low": 90,
"Range_High": 110
},
{
"PR_Reading_ID": 9,
"Description": "150 H.P. Inlet Temperature (La",
"Range_Low": 70,
"Range_High": 85
},
{
"PR_Reading_ID": 10,
"Description": "150 H.P. Outlet Pressure (Larg",
"Range_Low": 76,
"Range_High": 104
},
{
"PR_Reading_ID": 11,
"Description": "50 H.P. Cyclone Filter Inlet P",
"Range_Low": 3,
"Range_High": 29
},
{
"PR_Reading_ID": 12,
"Description": "50 H.P. Cyclone Outlet Pressur",
"Range_Low": 3,
"Range_High": 22
},
{
"PR_Reading_ID": 13,
"Description": "Sump Chemical Conductivity",
"Range_Low": 550,
"Range_High": 890
},
{
"PR_Reading_ID": 14,
"Description": "50 H.P. Outlet Temperature (Sm",
"Range_Low": 75,
"Range_High": 92
},
{
"PR_Reading_ID": 15,
"Description": "50 H.P. Outlet Pressure (Small",
"Range_Low": 3,
"Range_High": 9
},
{
"PR_Reading_ID": 16,
"Description": "50 H.P. Inlet Temperature (Sma",
"Range_Low": 60,
"Range_High": 80
},
{
"PR_Reading_ID": 17,
"Description": "50 H.P. Inlet Pressure (Small ",
"Range_Low": 9,
"Range_High": 24
},
{
"PR_Reading_ID": 18,
"Description": "40 H.P. Outlet Pressure (Small",
"Range_Low": 65,
"Range_High": 86
},
{
"PR_Reading_ID": 19,
"Description": "40 H.P. Inlet Temperature (Sma",
"Range_Low": 74,
"Range_High": 92
},
{
"PR_Reading_ID": 20,
"Description": "40 H.P. Inlet Pressure (Small ",
"Range_Low": 75,
"Range_High": 90
},
{
"PR_Reading_ID": 21,
"Description": "50 H.P. Tower Supply Pressure",
"Range_Low": 5,
"Range_High": 34
},
{
"PR_Reading_ID": 22,
"Description": "Culligan Inlet Pressure",
"Range_Low": 43,
"Range_High": 77
},
{
"PR_Reading_ID": 23,
"Description": "Culligan Outlet Pressure",
"Range_Low": 34,
"Range_High": 75
},
{
"PR_Reading_ID": 24,
"Description": "40 H.P. Mechanical Water Suppl",
"Range_Low": 75,
"Range_High": 88
},
{
"PR_Reading_ID": 25,
"Description": "DI Supply Meg Ohm",
"Range_Low": 6,
"Range_High": 15
},
{
"PR_Reading_ID": 26,
"Description": "UV Lights (Off\u003d0,On\u003d1)",
"Range_Low": null,
"Range_High": null
}
]
POSITION.height,view.props.defaultSize.heightHave you got a different problem?
You can set a fixed height for each row. To do that under props.rows set the height property to 28px (or alternate height of your choosing).
32px so if you have 800px total you have 760px left for 26 rows or 29.5384 (round down to 28px). This calc assumes you have nothing else occupying vertical space on the display.Also, I thought you should be able to set maxHeight (or max-height) as a property under props.rows.styles but I couldn't get that working to reduce the row size from defaults.
Update: Ignore the above, I suggest you reduce the default min-height of each row to something less than 30px as described in the post below.
I took a look at the data object you provided, the descriptions in there are all truncated as well so your issue with that lies upstream. What can you tell us about where that data comes from?
A few other suggestions...
props.pager.top and props.pager.bottom to both be falseOK, went down a rabbit hole but found an answer...
The reason we cannot reduce the row height below default on a Perspective table by adding a maxHeight (or max-height) property is because the default styling already includes a min-height property of 30px. So, to reduce the default row height we can just set min-height to something lower than the 30px default (even 0px). This way you can avoid setting a fixed row height like my previous post suggested.
You can set a reduced default height for each row. To do that under props.rows.style set the minHeight (or min-height) property to 28px (or alternate height of your choosing less than the default 30px). If you set it to 0px the the row height is defined by the contents.
The default min-height for the table row was found (and modification tested) using developer tools in Chrome:
Another nifty trick/cheat (perhaps related) for when you are trying to force a Perspective component, container or embedded container to fit into another size (bigger or smaller) is to use the CSS zoom property to scale everything.
I have used this with process diagrams created in a coordinate container targeting desktop that I then need to adapt to another display size, and with the toggle component because I don't like the default formatting (seems out of place with other component defaults) and I'll usually scale (zoom) it to 80%.
To scale the table, add a zoom property to props.style and set it to 75% (or another percentage of your choice).
There are ways to scale according to available screen size using zoom with page dimension properties, I could write that up if someone is interested.
Caution: Browser support for zoom is not universal, use at your own risk.
Ok, I found out where the data got truncated. From an import statement where I failed to specify the size of the varchar field.
Interesting that minHeight does not show up on the property list or style configuration dialog box.
OK, I LOVE that zoom option too! Tyler, barring any other unforeseen things, I think that I can make this work with those two style props.
Thank you!
