Responsive iframe help needed please

I’m trying to added a external sub forum to my WordPress site.

I’ve managed to get part of it to work


Im using this code

div class="content">
div class="embed-container">
iframe frameborder="0" scrolling="no" src="http://localhost:8080/phpbb3"></iframe>
/div>
/div>

CSS

.content {
    width: 100%;
    height: 100%;
    margin: 0px auto;
}
.embed-container {
    height: 100vh;
    width: 100%;
    padding-bottom: 75%;
    position: relative;
}
.embed-container iframe {
    min-width: 100%;
    width: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

as you can see it has a small issue, ive been able to fix this by increasing the padding-bottom: amount

I s there a auto option, this will only work as long as the padding-bottom abount is more then the space needed and ive not even tried to see what it would look like on other screens

Can any anyone please help

Thanks in advance

1 Like

2012,

When you post code on a page, please put three backticks on a line by themselves above the code, and three backticks on a line by themselves after the code. Like this:

```
your html and CSS here
```

If you have not read out posting guidelines, yet, please do so here:
Forum Posting Basics

I would like to see a screen shot or drawing that shows the imbedded iframe on the page with your Wordpress site. I cannot tell from the above image or from your code how it is supposed to fit on the page. I cannot see that it has a small issue because I cannot see the overall page.

It would be most helpful if your code were posted in the format of a “working page”. One that starts with <doctype and ends with </html> and includes enough CSS and HTML to demonstrate the issue.

If you cannot post a working page, then a link to the site along with a clear description of the problem would probably do.

A very basic guess…

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/responsive-iframe-help-needed-please/214453
2012
Feb 4,2016 10:45 PM
-->
    <style type="text/css">

body {
    padding:0;
    margin:0;
}

iframe {
    display:block;
    width:90%;    /* as desired */
    height:50vh;    /* as desired */
    border:none;
    margin:0px auto
}
    </style>
</head>
<body>

    <div class="yourcontent">
        <p>Your website's content preceeds the iframe</p>
        <p>Your website's content preceeds the iframe</p>
        <p>Your website's content preceeds the iframe</p>
        <p>Your website's content preceeds the iframe</p>
        <p>Your website's content preceeds the iframe</p>
        <p>Your website's content preceeds the iframe</p>
        <p>Your website's content preceeds the iframe</p>
        <p>Your website's content preceeds the iframe</p>
        <p>Your website's content preceeds the iframe</p>
        <p>Your website's content preceeds the iframe</p>
        <p>Your website's content preceeds the iframe</p>
    </div>
    <iframe src="https://www.sitepoint.com/"></iframe>

</body>
</html>

Im using wodpress

Im trying it out on the local host first before i post it live.

What I I think i need is a way to set auto padding-bottom: so it changes when needed.

the issue im having, is the bottom half of the page gets cut in iframe.

Ive added 2 full screen images below.

iframe

<div class="content">
<div class="embed-container">
<iframe frameborder="0" scrolling="no" src="http://localhost:8080/phpbb3"></iframe>
</div>
</div>

css

.content {
    width: 100%;
    height: 100%;
    margin: 0px auto;
}
.embed-container {
    height: 100vh;
    width: 100%;
    padding-bottom: 50%;
    position: relative;
}
.embed-container iframe {
    min-width: 100%;
    width: 10px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

I do not believe that you need positioned elements. Notice that my demo does not have any positioned elements and the iframe stays in the flow of the page.

position:absolute removes the element from the flow of the page.

The iframe frameborder and scrolling attribute are not supported in HTML5.
http://www.w3schools.com/tags/tag_iframe.asp

Likewise, you do not need to use width and height 100% everywhere.

Why would you give an iframe a width of 10px and a min-width of 100%?

Finally, I do not know what a variable padding bottom would do for you.

Which part of the screen shot is iframe and which part is your content?

My demo is a “working page”. Copy it to a file and open it in your browser and watch the behavior of the iframe. Experiment with the code.

The part inside the green box is iframe
I only know basics of web design, So I used what I found online and changed it a bit to do this.

Ive made a few new changes

I’ve removed the no scrolling, still removes the scroll in full screen.

<div class="content">
<div class="embed-container">
<iframe frameborder="0"  src="http://localhost:8080/phpbb3"></iframe>
</div>
</div>

I’ve removed some parts which seam to do nothing

Css

..embed-container {
    height: 100vh;
    width: 100%;
    padding-bottom: 50%;
    position: relative;
}
.embed-container iframe {
    min-width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

This is what I see now, but I was hoping to do it without the scrollbar

iframes are supposed to generate scrollbars if the content of the iframe exceeds the dimenstions of the iframe. In the full page view, the contents of the iframe appear to fit within the iframe properly. In the narrow width vew, the contents are cut off at the bottom of the page and no scroll bar is shown.

Are you thinking that adding padding to the bottom of the parent container will somehow push the iframe up so the user can see the rest of the contents of the iframe?

I do not understand what the padding is supposed to do. What are you thinking?

Please describe the “small issue” and please explain why you believe padding-bottom will help.

I believe that the problem is that iframes do not behave the way you imagine they behave. The dimensions of an iframe are not dependent on the content of the iframe. You have to make a best guess of the size of the content and the space you wish to allow for that content and draw your iframe accordingly. If needed, the iframe should be allowed to sprout scrollbars. An iframe will not stretch longer because the content of the iframe becomes longer at narrow widths. An iframe is just a window with a fixed frame.

Yes that what I was thinking,

iwith a few changes its working better then before, I dont see the scroll bar in the full view now only in the narrow view .[quote=“ronpat, post:7, topic:214453”]
Please describe the “small issue” and please explain why you believe padding-bottom will help.
[/quote]

the green box shows the issue, only half of the page is shown in the narrow view.

Can I do anything else other then use iframe to archive this ?

Internal scrollbars are the bane of iframes.

Your web page does not know how wide or tall the content in the iframe is. The content of the iframe cannot affect the dimensions of the iframe. The content can only trigger a scrollbar on the iframe.

I do not know of a way to do what you wish.

Would I be better off not using iframe and just add links to the forum in WordPress menu and wordpress links in the forum menu ?

Or if you have any other ideas

That’s what I would do.
Style both so they look like they go together. i.e. same color scheme. same logos, same menus, common header, common footer, etc.

Likely to take a bit of work, and some compromise will be needed for some things, but AFAIK that’s how it’s usually done.

As for making blog visitors aware of the forum, I think some type of “last post” or “top post” widget would help.

Thanks

I’m only a novice so how can I do this, can I copy part of the css, or should I just do what’s possible for me and hope for the best.

I think you could re-use a lot of the values. But the selectors would need to be different.

That is, the tags, classes and ids in the forum HTML and blog HTML will surely be different.

But it should be relatively easy to have them both use the same color scheme, border styles, fonts etc.

I wouldn’t mess with much more than that at first though. Then once you’re happy with that, save back-up copies and experiment with changing the HTML - layout, margins, padding etc.

Or leave that alone, and work at getting both to have a common header, footer, and “universal” nav links.
By universal, I mean “cross links”. The forum will have links specific to the forum, and so will the blog. But a few eg. Home, Forum, Blog, About, etc. could apply to both.

thanks

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.