How can I remove double scroll bars in applications within iframes?

To embed your application inside a web page, use iframe code like the following example. For more information, see Can I embed a converted web page into my website?.

<iframe class="ssweb-iframe" src="APPLICATION URL" width="100%" height="2500" frameborder="0" scrolling="no"></iframe>

If the page already has scrolling enabled, embedding an application that does not fit vertically results in two scroll bars.

Remove the second scroll bar

1. Make sure the iframe has the ssweb-iframe class, as shown in the example above.

   

2. Add custom CSS to the website or page that contains the iframe:

   .ssweb-iframe {
     height: 2600px !important;
   }
   
   @media (max-width: 1024px) {
     .ssweb-iframe {
       height: 2900px !important;
     }
   }
   

   If you use WordPress, select Customize for the current theme, then select Additional CSS.

   

Use the application's height for the CSS height values. The iframe height should be slightly greater than the application's body height.

Find the application height

1. Open the application in a new browser tab.
2. Right-click the application, select Inspect, and open the Elements panel.
3. Find the body element. Hover over it to see the height at the bottom of the highlighted region.

After applying the appropriate height, the embedded application should have only one scroll bar.