Perspective popup transparency

Ignition
1

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

2

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
3

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

4

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.

Screenshot 2024-03-28 at 11.43.43 AM
Screenshot 2024-03-28 at 11.43.43 AM636×700 12.4 KB

1 Like
5

In 8.1.40 Maker I'm seeing that the Title isn't rounding, but the actual view contents are (ignore the overflow, I made the radius a ridiculous number to accentuate my point). Any ideas on why this might be happening?

.ia_popup{
    border-radius : 50px;
}

image

6

The rule you've applied is for the outer-most Popup "container" element, and does not override any styling applied to internal children, like the header. You'll need to apply the same rule to that element. Note that your rounding is extreme enough that you're going to begin obscuring text and the close icon.

7

I'd recommend getting used to using the developer tools in your browser (F12, or Ctrl+Shift+I) to know which style classes to modify in stylesheet.css (or in your custom themes).

image
image1915×960 237 KB

You can see that I've made modifications in the "Styles" panel of the dev tools panel in this screen shot. I added a border radius to both the .ia_popup and the .ia_popup_header style classes. Once you've played around with the style classes in this panel, you should make the same changes in the stylesheet.css resource in the designer. In this case, you'd add the following to stylesheet.css:

.ia_popup_header{
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}

.ia_popup{
border-radius: 20px;
}
2 Likes
8

Thank you so much! I will follow your recommendation as well and get my head wrapped around the style classes and such! Thank you again!

1 Like