Perspective Table scaling

I have looked through the posts and tried all the different types of containers. I am not able to make my table adjust size based on the size of the popup the same way other views / containers allow you.

I want everything to scale based on the size of the browser, is this possible with a table component? Currently, if I make the popup smaller or bigger it will add/remove scrolling bars with zero scaling.

I was able to get a table to scale by putting it in a coordinate container with the view's mode set to percent.

image

A flex container should do exactly that.

Put the table in a flex container, set the table's position properties to

grow: 1
shrink: 1
basis: auto

You'll also need to set the container's alignItems property to stretch.

image

2 Likes

thank you for the responses. Here are so shots of how the table interacts as a popup when used in a flex container with the grow/shrink set to 1 and basis as AUTO. default container settings which include align items strech.

Originally had it as a coord container set to % and same issue.

image

image

Can you send the popup's view json ?
I can't replicate your issue with those settings...

I've had some issues in the designer with changing container properties and even though the props are changed, the container still behaves as if you hadn't changed it. Sometimes I have to close the view and reopen it when things like that happen.

{
  "custom": {},
  "params": {},
  "props": {},
  "root": {
    "children": [
      {
        "meta": {
          "name": "Table"
        },
        "position": {
          "grow": 1
        },
        "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
            }
          ]
        },
        "type": "ia.display.table"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column"
    },
    "type": "ia.container.flex"
  }
}

It is worth noting this issue ONLY happens when it is specified as a POPUP, when I navigate to a new screen it scales properly. I just tested that and it works normally as a url view.

Looking at this json (can't import it right now, no ignition on this machine):

  • the table doesn't seem to have shrink set to 1, but maybe it's a default and doesn't show up here
  • same for display: auto
  • same for root's alignItems not set to stretch

Make sure those are set, maybe you forgot to save ?

All items are set as you described, some of them are default. Were you able to get it to work as a popup and not a seperate url view? It seems to work fine if I navigate there but not as a popup.

The screenshots I posted above are of popups.
I created a view from your json and used it as a popup, and it works perfectly fine.

Are you using a custom theme file ? Or using some css trickery somewhere ?

Also, what version of perspective are you running ?

1 Like

Nothing special, this is a sandbox I am working on transitioning some vision pages to perspective.

I appreciate your help I am going to put this on the back burner for now as it is not a big priority just a quality of life thing.

image