If you're reading this article, you probably know just how tricky iframe styling can be. Design Tools take care of a lot of the headache surrounding iframes, but there may be instances where you need to troubleshoot iframe styling.
Note: This article is relevant to the legacy DesignPLUS Sidebar installed before July 2023. If your institution installed or updated the DesignPLUS Sidebar after July 2023, please check the New Sidebar Guides and the New Sidebar FAQ.
For example, the Fill Width or Span Proportionally buttons may not be working as you hoped. Here are some of the common issues that may interfere with Design Tools iframe styling that you can check in the HTML of your page.
ID Attribute
The Design Tools iframe tool adds a unique iframe ID to each iframe on the page. However, with copy and pasting or other editing, sometimes these IDs can become duplicated or removed. If the IDs of the iframes on the page are missing, out of order, or duplicated, then the Design Tools iframe tool may not work properly, which means that when you thought you were editing the iframe style, it wasn't actually applying due to ID errors. If the styles weren't actually applied, then the iframe will not display as you intended on the saved page. You can look at the HTML of the iframes and ensure that they each have a unique ID. See example below:
<iframe src="#" width="516" height="350" id="kl_iframe_1"></iframe>
<iframe src="#" width="516" height="350" id="kl_iframe_2"></iframe>
<iframe src="#" width="516" height="350" id="kl_iframe_3"></iframe>
Wrapper
When you style an iframe with Design Tools, it places a wrapper element around the iframe where special classes can be applied. If this wrapper got removed or otherwise edited, the styles may not function properly. You can check to see if there is a div wrapper. The two style classes are:
- kl_iframe_responsive_scale
- kl_iframe_fill_width
This is what a correct wrapper should look like:
<div class="kl_iframe_wrapper kl_iframe_responsive_scale kl_iframe_fill_width"><iframe ...></iframe></div>
Style Attribute
If the <iframe> element has a style attribute, it could interfere with some of the Design Tools functionality. Try removing the style attribute altogether. See the example below:
With style attribute
<iframe src="#" style="width: 500; height: 300;"></iframe>
Without style attribute:
<iframe src="#"></iframe>
100% Width
The iframe has a width and height attribute, but if width is set to 100%, it could cause some issues. Always use a set pixel width for the width attribute.
See the example below:
With 100% width
<iframe src="#" width="100%"></iframe>
With set pixel width
<iframe src="#" width="516"></iframe>
Accordions/Tabs
Sometimes, iframes don't render correctly inside of accordions/tabs. The best solution we've found for this is to apply the Scale Proportionally style to these iframes so that the DesignPLUS code has an opportunity to style them when the accordion is expanded.
