Tried almost everything - iFrame always 150px

Question

I have been fighting with iFrame height couple hours now and got just bad headache. Having three different iFrames in my site. They popping up when you click the button. One iFrame can be displayed at once.

Have been trying different JS scripts and CSS tricks i have found on internet, none of them working.

HTML

<div id="frontpage-7-div" class="d-flex align-items-center justify-content-center row"> 


        <div class="btn-group btn-group-toggle" style="padding: 20px; height: 100px;" data-toggle="buttons">

        <label class="btn btn-secondary active" onclick="Leppavaara()">
            <input type="radio" autocomplete="off"> Espoo
        </label>

        <label class="btn btn-secondary" onclick="Tivolitie()">
            <input type="radio" autocomplete="off"> Alppila
        </label>

        <label class="btn btn-secondary" onclick="Helsinki()">
            <input type="radio" autocomplete="off"> Lauttasaari
        </label>

        </div>


   

    <div id="leppavaara" class="kalenteri">
        <iframe width="100%" frameborder="0" scrolling="no" src="https://varaa.timma.fi/reservation/susannasnailsalonleppavaara" id="reservationIframe"></iframe>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/2.8.3/iframeResizer.min.js"></script>
        <script type="text/javascript">iFrameResize({checkOrigin: false}, '#reservationIframe8112');</script>
    </div>


    <div id="helsinki" class="kalenteri">
        <iframe width="100%" frameborder="0" scrolling="no" src="https://varaa.timma.fi/reservation/susannasnailssalonlauttasaari" id="reservationIframe"></iframe>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/2.8.3/iframeResizer.min.js"></script>
        <script type="text/javascript">iFrameResize({checkOrigin: false}, '#reservationIframe8112');</script>
    </div>


    <div id="tivolitie" class="kalenteri">
        <iframe width="100%" frameborder="0" scrolling="no" src="https://varaa.timma.fi/reservation/susannasnailsalonhelsinki" id="reservationIframe"></iframe>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/2.8.3/iframeResizer.min.js"></script>
        <script type="text/javascript">iFrameResize({checkOrigin: false}, '#reservationIframe8112');</script>
    </div>

    

</div>

CSS

#leppavaara {
    display: inline;
}
#helsinki {
    display: none;
}
#tivolitie {
    display: none;
}
.kalenteri {
    width: 100%;
    height: auto;
}

Tried example these:

https://css-tricks.com/snippets/jquery/fit-iframe-to-content/

HTML5 iFrame is only 150px in height

I am stuck at 150px, i can set manually height for example 700px, but those iframes are different height. And the height changes in mobile also. So that is why i want use its own height.

Question is: How can I set height same as the iframe content is?

First of all, your different iframes cannot all have the same ID. Even if some are hidden, they must still have different IDs. I don't know if this will actually fix the issue though. — Mathew Alden, Dec 29 '20 at 15:45
Also, I don't have time to dig into this deeply rn, but have you tried setting #leppavaara to "display: inline-block; width: 500px;"? — Mathew Alden, Dec 29 '20 at 15:46
@MathewAlden God damit. There was problem with ID, now i dont need any scripts. It is working fine. Sometimes problem is development blindness :D Thanks!! Make answer of that so I can mark it as answer. — Joko Joko, Dec 29 '20 at 16:07
There are a few issues with your HTML code: (1) the iframe ID should be unique, (2) the iframe ID you refer in your javascript code (`#reservationIframe8112`) does not match the iframe actual ID (`#reservationIframe`), (3) you do not need to import 'iframeResizr' (``) into each div; you simply have to import it once in the page `` section. If you fix those, you'll already see a change in how the page looks (for example see: https://jsfiddle.net/aexh24so/) [continue] — secan, Dec 29 '20 at 16:07
Having said that, some potentially relevant code is missing (e.g. the functions `Leppavaara()`, `Tivolitie()` and `Helsinki()`). May I suggest you post the entire page code? — secan, Dec 29 '20 at 16:08
For what concerns the height issue, you could set the container div height to 0 and toggle the overflow from `hidden` to `visible` and vice-versa in order to show or hide the iframe — secan, Dec 29 '20 at 16:19
@JokoJoko div IDs are not the only issue you should fix in the code you posted; lease refer to my comments above for details. — secan, Dec 29 '20 at 16:23

score 2 · Accepted Answer · answered Dec 29 '20 at 16:19

2

First of all, your different iframes cannot all have the same ID. Even if some are hidden, they must still have different IDs.

answered Dec 29 '20 at 16:19

Mathew Alden

1,458
2
15
34

Tried almost everything - iFrame always 150px

1 Answers1