Perspective XYChart appears different in Perspective Workstation

I have an XYChart in perspective. When running the app in a browser the chart appears as it does in the designer but when running the app in perspective workstation, the chart is squashed. Does anybody know what might be causing this/how to fix it?
In Browser:


In Perspective Workstation:

I think I have some ideas about what the issue may be. As you can maybe see in the screenshots the graph is inside a tab container. In the browser this turns into something that starts like this:

If I disable the style="flex: 1 0 calc(100% - 36px);" attribute from the highlighted element then the graph appears as it does in the workstation. I've looked on caniuse.com and it seems calc() has been supported for a very long time in most browsers so I can only assume the browser the workstation is wrapping also does but could it be the case that it doesn't? Is there any way to open the inspector within the workstation to check?

What type of root container are you using?

And sadly you cannot look at the HTML in the Designer itself. You have to do it how you are currently doing it, using the dev mode on the Perspective Session.

It's a flex container.

Yeah, I'm aware that you can't see the HTML in the designer but I'm trying to find out if there's a way to see it in Perspective Workstation's wrapped browser.

Workstation is currently using a quite old version of Chromium because the makers of the embedded browser library we use couldn't fix a bug we found on Linux. That appears to finally be fixed, so we should finally be able to upgrade Workstation's embedded browser in the next 8.1 version - assuming QA doesn't find anything else that's wrong.

How old are we talking? Allegedly calc() has been supported since pretty old versions of Chrome and Edge so I think it's probably going to be supported but I'm running out of ideas.

Oh I see, I apologize. From what I gathered from PGriffith said, you can't look at those properties in the Workstation.

Can you show what your settings are for your Flex Container? and how the Tab Container is being positioned in the Root Container?

Chromium 84, specifically. So, yeah, maybe not calc(), but could be some other rendering behavior. Browsers are an approximately infinite surface.

Yeah, I've done some reading that seems to suggest in the past there were restrictions on the expressions you could put inside calc() but I think they're unlikely to be the problem either. Very odd.

Zachary, my flex container is configured like so:
image
(The position tab is empty)

and the tab container like so:

Thank you! I think I understand what's happening here.

If you look at the documentation on Flex Containers, under section Child Component Flex Properties, there is the Basis Property.

Because you're using a Column Flex Container it is using the Basis for the height of your Tab Container.

On the designer it might look like it's taking up the full height of your View, I imagine you probably have the view height similar to the basis of your Tab Container. Thus, taking on the appearance of filling the entire space.

One thing you can do is set that basis to be a percentage. So that it would always take the same percentage of height. No matter the size of the viewport. In the case of a Row Flex Container it would take the percentage of Width.

So by changing the basis to 100% your Tab Container, it will now fill that entire space.

Hope that helps!

Okay perfect, that seems to have fixed it! It's still odd though because it wasn't just the designer it was taking up the full height of the view but also when I was running a session in a browser, the only place it wasn't taking up the full view was in the perspective workstation browser. Either way, I'll take the fix, thanks :slight_smile: