Iframe Width and padding issue.

michaeltodd
Tera Contributor

I have an iFrame on my page that takes the full width of the page, I would like some padding around it so it is not butted up against my borders but when I try to add padding or make the width smaller, the right side of my frame gets hidden. Does anyone know a way around this?

This is my page with Iframe at 100% width.

SS1.jpg

This is at 90% width.

SS2.jpg

I modified

iframe#gsft_main {

      width: 90%;

}


I also tried adding padding but had the same issues.

4 REPLIES 4

BenPhillipsSNC
Kilo Guru

Hi Michael,



I think "margin" is what you're looking for. In CSS, margin is space outside of the element, whereas padding is going to be your space within the element, padding the text from the walls of the cells. Try:



iframe#gsft_main {


      margin: /* 2em or 10px, etc */;


}


Also you can add margin just to the left and right sides, and leave the top/bottoms flush by doing this:



iframe#gsft_main {


      margin: 0 2em;


}



More at: W3Schools CSS Margin


Thanks Ben,



I've tried to manipulate the margin as well.   The same problem happens though, no matter what I manipulate, the right side of the iframe keeps getting hidden.   Here is an image that has a 40px margin for the frame. You can see the top line come in with the margin as desired but all lines under it are hidden.   I'm not sure why those keep getting hidden. Any suggestions?SS3.jpg


ravish2
Giga Expert

Work with your page layout choose a layout that is center align and place your i frame there. you can also customize your layout by changing dropzone code.



If you need any clarity kindly ask