Targeting a Specific Popup Without Affecting Others in Ignition

Ignition
,
1

Hi all,

When I apply this CSS to the general .ia_popup class:
.ia_popup {
width: auto !important;
height: auto !important;
max-width: 90vw !important;
max-height: 90vh !important;
overflow: auto !important;
}
all popups become auto-sized, and users can no longer resize them with the mouse.

I need only one specific popup (e.g., popup-mypopup) to be auto-sized while leaving other popups resizable. For example:
#popup-mypopup.ia_popup {
width: auto !important;
height: auto !important;
max-width: 90vw !important;
max-height: 90vh !important;
overflow: auto !important;
}

My questions:

  1. Is this the correct way to target a specific popup in Ignition?
  2. Is there a way to make only the specified popup auto-sized while preserving resize functionality for others?

Any practical examples or guidance would be greatly appreciated.

2

Yes, targeting a specific popup by specifying a unique id is the way I would recommend. Additionally, I recommend placing this into the stylesheet.css resource instead of placing it in your theme files. I’m not confident in the selector you specified, however… You might need to change #popup-mypopup.ia_popup to #popup-mypopup .ia_popup, depending on if the ia_popup class is actually applied at the same level as the id attribute.

3

Thanks for your guidance!

My popup structure looks like this:

<div class="client-root">
    <div class="popups-pane" style="z-index: 12560;">
        <div id="popup-mypopup" class="popup ia_popup">
        </div>
    </div>
</div>

I’ve tried the following selectors, but none of them worked:

#popup-mypopup.ia_popup
#popup-mypopup .ia_popup
.ia_popup[id^="mypopup"]

It seems that the CSS is still not applying to this specific popup.

Any further suggestions on how to target only this popup without affecting others?

4

Are you confident the style is not being applied, or has the session not picked up the changes? Please keep in mind that saving your changes in the designer will not result in an immediate update of style changes. A refresh of any open Perspective session is often required in order for the browser to ignore any cached style resources.

Try #popup-mypopup.ia_popup again, then save your changes, and then force a refresh of your browser session. Once this is done, examine your browser’s dev tools to verify your style resources include these new settings as you would expect.