Embed Feedback Button iFrame - Scrollbar bottom padding overflow from Supernova?

Publish -> Embed -> Feedback Button is what I am specifically using.
(Veterinary Release Form button on right bottom)

I don't know what that part is specifically called, but I would either like to get rid of the scrollbar on the outer frame, not the form, or to resize the frame so the bright green supernova is not seen. When I inspect that element it highlights "jt-content", but I tried specifically changing that and it didn't work. I definitely need help.

Hi Tiffany,

Thanks for reaching out to Jotform Support. I'll need a bit of time to look into this, and I'll be back as soon as I can.

Thanks for your patience and understanding, we appreciate it.

Hi Tiffany,

You can use Custom CSS code to change the color of the green background below the form, to match the background. Let me walk you through it:

1. First, copy this code:

html.supernova {

background-color: #796554 !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That's it. The code is automatically saved. 

Give it a try and let us know if you need any more help.

Changing the color was/is going to be what I do if I can't get rid of the scrollbar. I really wanted to get rid of the scrollbar since there's no reason for it to be there. It is a scrollbar for empty space with no content.

Hi Roy_Tiffany,

I'll need a bit of time to look into this. I'll get back to you as soon as I can.

In the meantime, let us know if you have any other questions.

Hi Roy_Tiffany,

To address the issue with the scrollbar appearing in your embedded form, we recommend adding the following custom CSS to your website. This solution targets the iframe directly by its ID and hides the scrollbar to create a cleaner, more seamless appearance:

#iframeID {

  overflow: hidden !important;

  scrollbar-width: none; /* For Firefox */

}





#iframeID::-webkit-scrollbar {

  display: none; /* For Chrome, Safari, and other WebKit-based browsers */

}

Replace iframeID with the actual ID of your embedded form iframe. This will prevent the scrollbar from displaying around the iframe while preserving the form's functionality and layout.Be sure to place the CSS in the part of your website where custom styles are manageds uch as within a <style> tag or your site’s stylesheet, depending on how your platform handles embedded elements.

That’s it. Give it a try, and let us know how it goes.

Sadly, that did not work. I think I did it correctly, but correct me if I am wrong.

Hi Roy_Tiffany,

Please try this custom CSS code and add it to your form:

.pdff-welcomeView-docCont {

  height: 448px !important;

  max-height: 448px !important;

}

I tried it on your website using the console to check if the custom CSS code will work and here's the result:

Give it a try and let us know how it goes.

It works! This is exactly what I wanted. Thank you SO much, Jan! I appreciate you also helping Keenly and Lorenz. I am very happy now. :-)