CODEWITHSUNDEEP
htmlcssiframe
Vinnie Van Rooij
Vinnie Van Rooij

Reputation: 121

Make an Iframe responsive in height

I have a type of "store-locator" on https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/ Due to demand, I want to put this in an iFrame so other websites can display this form on their page. Giving them the possibility to easily add my "store-locator" to their website.

At the moment I have: 

<iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no" style="width:100%;height:734px;border:none;overflow:hidden;"></iframe>

Which works, as long as the screen doesn't get to small. However, the form is responsive, and if the screen becomes very small, the row with addresses goes underneath the big map. Making the complete form a lot higher then on normal view. (normally it would be 734px high, in responsive design it is 1388px high) This would mean that I need an iFrame that stretches just as the content stretches. (if that is at all possible)

If that is not possible, would it be possible to put something like this in the style? (it doesn't work if I use it in my example, but maybe I'm doing it wrong?)

Style="@media (max-width:675px){iframe{height:1388px}}"

The goal of this piece of CSS would be to change the height of the iFrame when the width goes below 675px.

Another solution is welcome, as long as it works :). Because I'm displaying the code on my website, so other can just copy-paste it, it would be beneficial if the code is kept reasonably simple.

It seems 1 person has removed their comment, even though the solution was pretty good. Essentially, this was the code that I ended up with thanks to him:

<style>#iframe {width:100%;height:740px;border:none;overflow:hidden;}
@media (max-width:675px){#iframe{height:1588px;}}
</style>
<iframe src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/ 
"frameborder="0" id="iframe" name="De Detailer-Zoeker"></iframe>

The only problem is that this only responds to the size of the browser-screen, and not the container in which the iFrame is placed. This means that the iFrame will behave differently on a website with sidebars, then one without sidebars.

Upvotes: 1

Views: 9947

Answers (4)

Rubenxfd
Rubenxfd

Reputation: 464

You are almost there, you just need to adjust your media query a bit.

You say you want other websites to include your iframe without having to edit their CSS file. You can do that as followed:

Tell the client to place the following CSS in their <head> section. 

<style>
  @media screen and (max-width:675px){
    #iframe{
      min-height:1388px;
      overflow-y: scroll !important;
    }
  }
</style>

Then, tell them to put the iframe between the <body> tags where they want to display the iframe.

<iframe id="iframe" name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no" style="width:100%;height:734px;border:none;overflow:hidden;"></iframe>

Look at this working fiddle:

Hope this helped!

Upvotes: 0

Lars Peterson
Lars Peterson

Reputation: 1508

You have a couple ways of dealing with this issue.

1. Breakpoints

Add a breakpoint the moment the list of address goes underneath the map. You can use CSS Media Queries to acheive this.

@media (max-width: 675px) {
    iframe {
        height: 1388px;
    }
}

2. Javascript

Use Javascript to read the width of the screen and then change the height of the iframe accordingly.

Adjust width height of iframe to fit with content in it

Make iframe automatically adjust height according to the contents without using scrollbar?

However the Javascript method has drawbacks.

Upvotes: 1

Shital Marakana
Shital Marakana

Reputation: 2887

code for responsive iframe 

<style type="text/css">
    iframe {
        width:100%;
        height:734px;
        border:none;
        overflow:hidden;
    }
    @media screen and (max-width:1166px) {
        iframe {
            width:100%;
            height:734px;
        }

    }
    @media screen and (max-width:1024px) {
        iframe {
            width:100%;
            height:734px;
        }
    }
    @media screen and (max-width:980px) {
        iframe {
            width:100%;
            height:734px;
        }
    }
    @media screen and (max-width:767px) {
        iframe {
            width:100%;
            height:1388px;
        }
    }
    @media screen and (max-width:599px) {
        iframe {
            width:100%;
            height:1388px;
        }
    }
    @media screen and (max-width:479px) {
        iframe {
            width:100%;
            height:1388px;
        }
    }
    @media screen and (max-width:374px) {
        iframe {
            width:100%;
            height:1388px;
        }

    }
    </style>
    <iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no"></iframe>

Upvotes: 0

Gerard
Gerard

Reputation: 15806

It works fine when you define all CSS in an external style sheet.

iframe {
  width: 100%;
  height: 734px;
  border: none;
  overflow: hidden;
}

@media (max-width:675px) {
  iframe {
    height: 1388px
  }
}
<iframe name="De Detailer-Zoeker" src="https://www.carcarenederland.nl/detailer-zoeker/detailer-zoeker/" scrolling="no"></iframe>

Upvotes: 0

Related Questions