How can I determine the position of each modalFrame to set its display correctly?

[nhanhv]

I have two modals, each positioned differently.

ModalFrame 1 is centered in the middle of the screen and belongs to the main frame.

ModalFrame 2 is positioned at the top right corner and belongs to the header module.

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?

Thanks.

[MiguelOrtiz]

Hey @nhanhv,

any chance you're able to target each modal directly using this wonderful CSS guide?

Maintain custom CSS styles on components through feature updates, etc

Hey @MiguelOrtiz! Especially once you are at the component level of styling by substring matching your id i.e. [id*="yourComponentId"], there are typically other distinctive ID or class attributes and/or their values that are also very far more distinct and obviously named than some of the more illogically named classes. For context, below is an example of what I mean between the differences of a conventionally named id/class, and one that is non-conventional/illogical that would likely change …

[AJVancattenburch]

Thank you for the shout-out @MiguelOrtiz!

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.

[nhanhv]

@MiguelOrtiz @AJVancattenburch
Thank you very much!
[class*="yourComponent"] helped me a lot in other cases.

However, in this specific case, I can't determine class or id by 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.

Thanks again for your help!

[AJVancattenburch]

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:

1. 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"...
2. 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.

[nhanhv]

@AJVancattenburch Yes, I understand, thanks a lot.

[AJVancattenburch]

100%! I hope that helps with what you're trying to achieve!