Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 26, 2021 at 6:53 pm #1302452
    dttdev

    Hi,

    I am trying to use an iframe to embed a booking system widget onto this page in private credentials, however, even with height set to 100%, a scroll bar appears. I have tested setting the height to 900px and it works fine in developer mode. I am a bit of a novice here so would be very grateful if anyone out there could advise what I can do and where to change the CSS to achieve it? Or is there a better way, a different iframe that is easier to work with?

    Many thanks in advance

    May 30, 2021 at 3:51 pm #1303017
    Mike

    Hey dttdev,
    Thank you for your patience and the link to your page, as I understand your request the change should only be on this one page so in the css I added the page ID and the iframe ID and in my test this works well, but I notice that your iframe has the height declared twice, once as a regular height attribute and once as a style attribute:
    2021-05-30_093728.jpg
    this is not really a problem but if in your iframe code you can see the height:750px; go ahead and remove it, otherwise don’t worry about it.
    I also noticed that setting the height to 900px does remove the scroll bar until the option Manicures & Pedicures is picked and then it would require a height of 1200px to remove the scroll bar, so I just added this to the css, please feel free to adjust to suit.
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.page-id-946 #main #JM2021_advanced_iframe {
	min-height: 1200px;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    June 2, 2021 at 2:04 am #1303485
    dttdev

    Hi Mike,

    No need to apologise, many thanks for getting back to me. And, my apologies for the late reply, I have been away from things for a few days.

    I have added the CSS you provided and reduced the min-height to 750px, that way the landing widget is the correct height with no unnecessary blank space below, thereafter I am happy for the scroll bar to come into play. One question, why when adding a 100% to the height does it only provide a ‘letterbox’ size of widget?

    Many thanks again for your time & help.

    Best,
    Jeremy

    June 2, 2021 at 11:56 am #1303569
    Mike

    Hi,
    Glad to hear this helped, a height percentage is subject to it’s parent definition, so in this case defining the height was necessary. Unless there is anything else we can help with on this issue, shall we close this then?

    Best regards,
    Mike

    June 2, 2021 at 8:35 pm #1303659
    dttdev

    Hi Mike,

    Ah, ok that makes sense. And yes, go ahead and close the thread.

    Thanks again for all your help.

    Best,
    Jeremy

    June 3, 2021 at 12:45 pm #1303756
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘iframe – embedding height problem’ is closed to new replies.