Every time I think I'm getting good at this CSS shows me that I'm not really.
I'd like the top two tables (1 and 2) to expand to show all rows without scrollbars. Table 1 can be shorter (as it has less rows) but I don't mind it having empty space at the bottom. They're both in a Flex Row container (orange border) so this needs to grow to suit.
The third table should also expand to show all rows without a table scrollbar and the user should just use the page scrollbar or PgDn / PgUp to see the contents.
Could anyone paste the view into Designer and give me some pointers?
View JSON
{
"custom": {},
"params": {},
"props": {
"defaultSize": {
"height": 702
}
},
"root": {
"children": [
{
"children": [
{
"meta": {
"name": "Table1"
},
"position": {
"shrink": 0
},
"propConfig": {
"props.data": {
"binding": {
"config": {
"expression": "null"
},
"transforms": [
{
"code": "\tdata \u003d []\n\tfor i in range(7):\n\t\tdata.append([i, \"Table 1 item \" + str(i) + \" of 7\"])\n\t\n\theaders \u003d [\"Row\", \"Notes\"]\n\treturn system.dataset.toDataSet(headers, data)",
"type": "script"
}
],
"type": "expr"
}
}
},
"props": {
"pager": {
"bottom": false
},
"style": {
"margin": 8,
"padding": 5
}
},
"type": "ia.display.table"
},
{
"meta": {
"name": "Table2"
},
"position": {
"basis": "400px"
},
"propConfig": {
"props.data": {
"binding": {
"config": {
"expression": "null"
},
"transforms": [
{
"code": "\tdata \u003d []\n\tfor i in range(12):\n\t\tdata.append([i, \"Table 2 item \" + str(i) + \" of 12\"])\n\t\n\theaders \u003d [\"Row\", \"Notes\"]\n\treturn system.dataset.toDataSet(headers, data)",
"type": "script"
}
],
"type": "expr"
}
}
},
"props": {
"pager": {
"bottom": false
},
"style": {
"margin": 8,
"padding": 5
}
},
"type": "ia.display.table"
}
],
"meta": {
"name": "FlexContainer"
},
"position": {
"basis": "300px",
"shrink": 0
},
"props": {
"style": {
"borderColor": "#D27A0C",
"borderStyle": "solid",
"borderWidth": 1,
"margin": 5
}
},
"type": "ia.container.flex"
},
{
"meta": {
"name": "Table3"
},
"position": {
"shrink": 0
},
"props": {
"data": [
{
"city": {
"align": "center",
"editable": true,
"justify": "left",
"style": {
"backgroundColor": "#F7901D",
"classes": "some-class"
},
"value": "Folsom"
},
"country": "United States",
"population": 77271
},
{
"city": "Helsinki",
"country": "Finland",
"population": 635591
},
{
"city": "Jakarta",
"country": "Indonesia",
"population": 10187595
},
{
"city": "Madrid",
"country": "Spain",
"population": 3233527
},
{
"city": "Prague",
"country": "Czech Republic",
"population": 1241664
},
{
"city": "San Diego",
"country": "United States",
"population": 1406630
},
{
"city": "San Francisco",
"country": "United States",
"population": 884363
},
{
"city": "Shanghai",
"country": "China",
"population": 24153000
},
{
"city": "Tokyo",
"country": "Japan",
"population": 13617000
},
{
"city": "Washington, DC",
"country": "United States",
"population": 658893
},
{
"city": "Wellington",
"country": "New Zealand",
"population": 405000
},
{
"city": "Delhi",
"country": "India",
"population": 11034555
},
{
"city": "Dhaka",
"country": "Bangladesh",
"population": 14399000
},
{
"city": "Lagos",
"country": "Nigeria",
"population": 16060303
},
{
"city": "Karachi",
"country": "Pakistan",
"population": 14910352
},
{
"city": "Istanbul",
"country": "Turkey",
"population": 14025000
},
{
"city": "Cairo",
"country": "Egypt",
"population": 10230350
},
{
"city": "Mexico City",
"country": "Mexico",
"population": 8974724
},
{
"city": "London",
"country": "United Kingdom",
"population": 8825001
},
{
"city": "New York City",
"country": "United States",
"population": 8622698
},
{
"city": "Tehran",
"country": "Iran",
"population": 8154051
},
{
"city": "Bogota",
"country": "Colombia",
"population": 7878783
},
{
"city": "Rio de Janeiro",
"country": "Brazil",
"population": 6429923
},
{
"city": "Riyadh",
"country": "Saudi Arabia",
"population": 5676621
},
{
"city": "Singapore",
"country": "Singapore",
"population": 5535000
},
{
"city": "Saint Petersburg",
"country": "Russia",
"population": 5191690
},
{
"city": "Sydney",
"country": "Australia",
"population": 208374
},
{
"city": "Abidjan",
"country": "Ivory Coast",
"population": 4765000
},
{
"city": "Dar es Salaam",
"country": "Tanzania",
"population": 4364541
},
{
"city": "Wellington",
"country": "New Zealand",
"population": 405000
},
{
"city": "Los Angeles",
"country": "United States",
"population": 3884307
},
{
"city": "Berlin",
"country": "Germany",
"population": 3517424
},
{
"city": "Jeddah",
"country": "Saudi Arabia",
"population": 3456259
},
{
"city": "Kabul",
"country": "Afghanistan",
"population": 3414100
},
{
"city": "Mashhad",
"country": "Iran",
"population": 3001184
},
{
"city": "Milan",
"country": "Italy",
"population": 1359905
},
{
"city": "Kiev",
"country": "Ukraine",
"population": 2908703
},
{
"city": "Rome",
"country": "Italy",
"population": 2877215
},
{
"city": "Chicago",
"country": "United States",
"population": 2695598
},
{
"city": "Osaka",
"country": "Japan",
"population": 2691742
},
{
"city": "Bandung",
"country": "Indonesia",
"population": 2575478
},
{
"city": "Managua",
"country": "Nicaragua",
"population": 2560789
},
{
"city": "Paris",
"country": "France",
"population": 2229621
},
{
"city": "Shiraz",
"country": "Iran",
"population": 1869001
},
{
"city": "Manila",
"country": "Philippines",
"population": 1780148
},
{
"city": "Montreal",
"country": "Canada",
"population": 1649519
},
{
"city": "Guadalajara",
"country": "Mexico",
"population": 1495189
},
{
"city": "Dallas",
"country": "United States",
"population": 1317929
},
{
"city": "Yerevan",
"country": "Armenia",
"population": 1060138
},
{
"city": "Tunis",
"country": "Tunisia",
"population": 1056247
}
],
"filter": {
"style": {
"margin": 8,
"padding": 5
}
},
"pager": {
"bottom": false
},
"style": {
"margin": 8,
"padding": 5
}
},
"type": "ia.display.table"
}
],
"meta": {
"name": "root"
},
"props": {
"direction": "column"
},
"type": "ia.container.flex"
}
}
Many thanks!
tomorrow it is!