Skip to main content
Nintex Community Menu Bar
Solved

NAC Form - iframe background colour

  • October 17, 2024
  • 7 replies
  • 88 views

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;}

7 replies

Forum|alt.badge.img+10
  • Nintex Employee
  • October 21, 2024

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;}

 


Forum|alt.badge.img+10
  • Nintex Employee
  • Answer
  • October 21, 2024

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;}


Forum|alt.badge.img+2
  • Author
  • Rookie
  • October 21, 2024

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


MillaZ
Nintex Employee
Forum|alt.badge.img+22
  • Nintex Employee
  • October 28, 2024

Hi @PD 
Have you solved this issue?


Forum|alt.badge.img+2
  • Author
  • Rookie
  • October 29, 2024

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


Forum|alt.badge.img+10
  • Nintex Employee
  • October 29, 2024

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.


Forum|alt.badge.img+2
  • Author
  • Rookie
  • October 29, 2024

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