Applying code to modal only, not base datapage

[oliverk]

A quick question.

How do I apply styling in the datapage that appears in a modal, but not the datapage(s) in the main page that the modal appears on?

For example, I want this to appear in the header of my modal datapage, and not affect the other datapages:

<style>

.cbResultSetTable {

          display: none !important;

  }

<style>

 

Thanks

 

 

[kpcollier]

You can try wrapping the modal datapage in a div with a unique id, and then use a selector to only style the cbResultSetTable element within that div. Something like this:

In the header:

<div id="someID">

In the footer:

</div>

CSS Rule:

#someID .cbResultSetTable {
    /* Your CSS rules here */
}

 

[CoopperBackpack]

Hello @oliverk,

Forms, Reports, Calendars, Charts DataPages has the following tag:

<form method="post" id="caspioform" action="https://accountID.caspio.com/dp/AppKey?cbUI=1" style="margin: 0px;">

 

 

Each DataPage has its unique AppKey. Actually AppKey is the unique DataPage identifier.

So, the reliable way to reference styles of this particular DataPage is to refer to its AppKey. For that use the [@cbAppKey] parameter that will be replaced with the DataPage AppKey when the DataPage is loaded. 

For example:

<style>
form[action*="[@cbAppKey]"] .cbResultSetTable{
    display: none !important;
  }
</style>

[oliverk]

On 6/10/2024 at 7:36 AM, CoopperBackpack said:

Hello @oliverk,

Forms, Reports, Calendars, Charts DataPages has the following tag:

<form method="post" id="caspioform" action="https://accountID.caspio.com/dp/AppKey?cbUI=1" style="margin: 0px;">

 

 

Each DataPage has its unique AppKey. Actually AppKey is the unique DataPage identifier.

So, the reliable way to reference styles of this particular DataPage is to refer to its AppKey. For that use the [@cbAppKey] parameter that will be replaced with the DataPage AppKey when the DataPage is loaded. 

For example:

<style>
form[action*="[@cbAppKey]"] .cbResultSetTable{
    display: none !important;
  }
</style>

Thanks, this worked!