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

Created On
byAdam Aksu

To embed your application inside a web page; you can use an iframe code like below. For more information about embedding applications using iframe, please see this page.

 <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 doesn’t fit vertically will result in two scroll bars.

To remove the second scroll bar, follow the steps below.

    1. Make sure you have “ssweb-iframe” class in your iframe code like below.
    2. Add custom CSS to your website or page that contains this iframe.
.ssweb-iframe { 
    height: 2600px!important; 
}

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

If you’re using WordPress, you can click the “Customize” on your current theme, and select Additional CSS.

Use the application’s height for the height values in the CSS code. Ideally, the height should be more than the application’s body height.

To find the height of your application,  

  1. Open your application in the new tab.
  2. Right click on your application and click “inspect element”; then go to the Elements section.
  3. Find the “body” element. When you mouse over that element, you can see the height in the bottom of the blue colored region.

    The embedded application should now have only one scrollbar.