Skip to main content
Nintex Community Menu Bar
Solved

NAC Form - iframe background colour

  • Oct 17, 2024 9:56 PM UTC
  • 7 replies
  • 147 views
  • Translate All

Forum|alt.badge.img+2

Hi, does anyone know how to change the background colour of an embedded NAC form iframe? We have some rules on the form which makes the form longer or shorter, depending on the answers to previous questions, so need to set the height of the iframe to accommodate this. This results in an unsightly grey box beneath the form. Any idea how to set this to white? Setting background-color="white" doesn’t work.

 

<script src="https://domainX.workflowcloud.com/embedform/iframe/ntx-embed-iframe.js" data-id="ntxFormContainer-75057f2a-6aef-45e9-a803-4efa3b6f358d"></script><iframe id="ntxFormContainer-75057f2a-6aef-45e9-a803-4efa3b6f358d" scrolling="no" style="width:100%; border:none;" height="2000px" src="https://domainX.workflowcloud.com/embedform/iframe?id=75057f2a-6aef-45e9-a803-4efa3b6f358d"></iframe>

Best answer by brent_read

Hi @PD 

Noticed one additional piece you’d want for the embedded page to remove the gray box:

.nx-theme-page {--ntx-form-theme-color-page-background: #FFFFFF;}

.xcomp-body {background-color: #FFFFFF;}

View original

7 replies

Forum|alt.badge.img+11
  • Nintex Employee
  • Oct 21, 2024 3:07 PM UTC

Hi @PD,

If it’s the background color behind the form that’s showing in the IFrame then I think adding the following CSS will work:

.nx-theme-page {--ntx-form-theme-color-page-background: #FFFFFF;}

 

Translate

Forum|alt.badge.img+11
  • Nintex Employee
  • Answer
  • Oct 21, 2024 3:26 PM UTC

Hi @PD 

Noticed one additional piece you’d want for the embedded page to remove the gray box:

.nx-theme-page {--ntx-form-theme-color-page-background: #FFFFFF;}

.xcomp-body {background-color: #FFFFFF;}

Translate

Forum|alt.badge.img+2
  • Author
  • Rookie
  • Oct 21, 2024 6:19 PM UTC

Thanks @brent_read, I’ll get our website team to test that out and let you know if that resolves it.

Translate

MillaZ
Nintex Employee
Forum|alt.badge.img+23
  • Nintex Employee
  • Oct 28, 2024 10:20 AM UTC

Hi @PD 
Have you solved this issue?

Translate

Forum|alt.badge.img+2
  • Author
  • Rookie
  • Oct 29, 2024 9:53 PM UTC

Hi @brent_read, where does that CSS need to get added? The iframe won’t pick it up from the website CSS. Thanks.

Translate

Forum|alt.badge.img+11
  • Nintex Employee
  • Oct 29, 2024 10:00 PM UTC

Hi @PD 

IT goes in the CSS for the form.  If you open the Form Designer in NAC, click the styles tab, and scroll down on the right side panel you should see an option for advanced styles.  That section will give you a toggle to add CSS to the form.  For more about CSS on forms in NAC you can go to  https://help.nintex.com/en-US/nwc/Content/Designer/CustomCSSGuidelines.htm.

Translate

Forum|alt.badge.img+2
  • Author
  • Rookie
  • Oct 29, 2024 10:07 PM UTC

Thanks @brent_read. That’s exactly what I was looking for!

Translate