I'm not sure how to define these two modals to set their display positions correctly. I tried retrieving their class names, but it seems both modalFrames have the same class.
Does anyone have a suggestion on how to approach this?
I feel like it's also important to note that the method in my original post works better using a class attribute over an id attribute to hit that most parent level of component / modal.
I've noticed targeting your components CSS styles like this:
[class*="yourComponent"]
Works better than the latter (below), as targeting the ID I noticed will also change some styles outside the scope of your component by also effecting some styles in the inspector panel of said component:
[id*="yourComponent"]
Targeting by class attribute like in the first example above keeps everything in scope of your component.
---Update:
When i using selector: [data-scroll-target-id*="headerContractDev1::modalFrame1"] It works well for my current case.
However, I wanted to confirm if this is a reliable solution, or if there might be any potential issues with using data-scroll-target-id as a target attribute in the long run.
It has seemed like data-scroll-target-id is quite consistent and reliably available, but I would suggest using substring matching so your styles adhere as the casing or something else with that specific attribute value is likely to change at some point.
I would do the following:
Change the name of your modal to something specific. If you're going to be applying custom CSS especially, give your modal component a good name that isn't "modalFrame1". For example, let's say you end up calling it "myCustomModal"...
Now use less strict of substring matching on your modal data-scroll-target-id attribute like this: [data-scroll-target-id*="myCustomModal"]
Your actual name of your component should always be present somewhere in that attribute value.
This will also enable you to style other potential modals with the same method (so long as you give them good unique names) without effecting the styling of other modals in your app.
HOWEVER, if you want to apply a consistent style to ALL modals in your project, give them all unique names but keep the start or end of your attribute values for each modal the same. If you ended each name of every modal component with "appModal", you could apply consistent styling to every modal instance in your app by targeting them all like this: [data-scroll-target-id*="appModal"].
Personally, I've been most recently trying to do this with all components because usually you want to apply consistent styles with the least amount of code possible. Naming all "like" components with an identical portion within their name allows us to do that when using attribute selectors and substring matching in our custom styles.