Perspective popup transparency

How can I make the popup transparent? There aren't style props for the view, just the root. But changing the root.props.style still leaves the corner of the view flagging out from the corner radius.

I saw this post about setting the view transparency but I'm not finding it.
Perspective popups - Ignition - Inductive Automation Forum

I've exaggerated the colors, but this is what I'm referring to:
image

I don't know the answer to your question but it seems to be one of a series of questions on a radiused corner theme for an app you're building. You might find that this looks dated fairly quickly. I suggest that you do all of these in CSS or set the radius as a session property and bind everything to that so it can be set to zero for that nice clean square look when it needs to be updated or when you're gone!

1 Like

Thanks for the advice. I was using styles to achieve this, but a custom session prop does seem easier to adjust. Thank you.

Well...

You can set a rule within the stylesheet.css resource or your custom theme files to manage the corners of the Popup:

.ia_popup {
    border-radius: XXpx;
}

But this value can't be tied/bound to any session property because it's a resource in use by the session without being part of the session itself.

Also, this is only applied to the Popup - not the contents of the Popup. You're going to have to pay careful attention to what settings you apply to Views used by Popups. if you look at the bottom of this Popup, you can see the View extending beyond the "bounds" of the Popup due to the rounding. overflow settings won't fix this because there's no actual overflow occurring. You'll need to apply the same border radius setting to the Views in use within your Popups.

1 Like