Skip to main content
Nintex Community Menu Bar

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>

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

 


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


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


Hi @PD 
Have you solved this issue?


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


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.


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


Reply