3rd party website booking form not displaying correctly

Hi, I'm trying to embed the booking form from the website I use to manage my practice (Halaxy), and am having an issue where only the top section of it displays. I can scroll up and down to view the whole thing, but I'm only able to view it through a small area, no matter how much I expand the block. It shows up this way both while editing the page and when viewing it (both on desktop and mobile). The first screenshot I've attached is of this. This is the code:

<iframe src="https://www.halaxy.com/book/widget/psychologist/simon-wegman/721981/624781" style="border:0;width:100%;height:100%;"></iframe>

I worked out that by changing the height %, I could get it to display correctly on desktop (shown in second screenshot), but now it looks totally off on mobile (third screenshot). It also goes wonky in the desktop mode if I start resizing the browser window. Does anyone know what I need to do to get both desktop (regardless of how the window is sized) and mobile to display correctly?

Thanks!

Hi,

Can you share link to page where you added the form? We can check easier

Sorry for the delayed response, when there were no replies after a few days, I thought that was the end of that. I ended up getting a friend to help. Thanks anyway!

Having the same issue, how did you fix it?

On 7/25/2023 at 7:05 AM, KyleD123 said:

Having the same issue, how did you fix it?

 

If you share link to page where you have problem, we can check easier

Having the same issue at the following page https://www.thelittlehouseofhealing.com.au/halaxy

help

pls

On 8/5/2023 at 8:50 AM, Penscope said:

Having the same issue at the following page https://www.thelittlehouseofhealing.com.au/halaxy

help

pls

change your iframe code to this

<iframe src="https://www.halaxy.com/book/widget/hypnotherapist/sascha-graham/1091121/876261?wmode=opaque" data-embed="true" style="border:0;width:100%;height:1000px;"></iframe>

I changed height:100% to height:1000px

Amazing! You're a champion. Thanks

Hi, I have tried the same code but my widget is not appearing correctly on mobile.

And also tried with these two code snippets/ CSS but I haven't been able to make the iframe bigger

I have used these two code snippets as well to test

<iframe src="https://www.halaxy.com/book/widget/altspace-therapies/location/1056481" style="border:0;width:100%;height:1000px;"></iframe>

<style>
  .embed-responsive {
    overflow: hidden;
    padding-top: 56.25%; /* Aspect ratio for responsive design (16:9) */
    position: relative;
  }

  .embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

<div class="embed-responsive">
  <iframe src="https://www.halaxy.com/book/widget/altspace-therapies/location/1056481" frameborder="0" allowfullscreen></iframe>
</div>
 

Here's a picture for your reference. Looking forward to your inputs. Thank you.

Hi

I am having the same issue on mobile and my calendar looks wonky and there's too much scrolling. I have tried the same code but my widget is not appearing correctly on mobile.

On 3/8/2024 at 2:06 PM, poojabharadwaj said:

Hi

 

I am having the same issue on mobile and my calendar looks wonky and there's too much scrolling. I have tried the same code but my widget is not appearing correctly on mobile.

And also tried with these two code snippets/ CSS but I haven't been able to make the iframe bigger for mobile view

I have used these two code snippets as well to test

<iframe src="https://www.halaxy.com/book/widget/altspace-therapies/location/1056481" style="border:0;width:100%;height:1000px;"></iframe>

<style>
  .embed-responsive {
    overflow: hidden;
    padding-top: 56.25%; /* Aspect ratio for responsive design (16:9) */
    position: relative;
  }

  .embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
</style>

<div class="embed-responsive">
  <iframe src="https://www.halaxy.com/book/widget/altspace-therapies/location/1056481" frameborder="0" allowfullscreen></iframe>
</div>
 

Here's a picture for your reference. Looking forward to your inputs. Thank you.

Can you share link to this page?