Help with google calendar

[ghines]

Hi all,
I'm trying to insert a google calendar into an HTML object and make it responsive and I'm not having any luck. The calendar is inserted correctly but not responsive.

HTML properties: Use <div> to set position and size of the HTML | Overflow default.

The code is:

Code: Select all

<style>

/* Responsive iFrame */

.responsive-iframe-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.responsive-iframe-container iframe,
.vresponsive-iframe-container object,
.vresponsive-iframe-container embed {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>


<div class="responsive-iframe-container">
<iframe src="https://calendar.google.com/calendar/embed?height=400&amp;wkst=1&amp;bgcolor=%23ffffff&amp;ctz=Australia%2FSydney&amp;src=ZTcxMjJmN3NyNjFjdGlkbzVyaGgxMzV0dWdAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;src=ZW4uYXVzdHJhbGlhbiNob2xpZGF5QGdyb3VwLnYuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;color=%23795548&amp;color=%23009688&amp;showTabs=0&amp;showPrint=0" style="border:solid 1px #777" width="800" height="400" frameborder="0" scrolling="no"></iframe>
</div>

If I don't insert the code into an HTML Object and just insert it into the body of a blank page the calendar is responsive.

Any help on what I might be doing wrong would be appreciated.

TIA

[Pablo]

By 'responsive', do you mean 'flexible'?
An HTML object is flexible if you place it inside a layout grid and set the full width property to 'true'

[ghines]

By 'responsive', do you mean 'flexible'?

By responsive I mean change size as the resolution changes. If you could point me in the right direction it would be appreciated.

[Pablo]

The HTML object is responsive. So, it can have a different size in breakpoints.
Also as mentioned, it can be flexible in layout grids.

[ghines]

Sorry @Pablo so just to be sure.

Are you saying the HTML will not automatically change size and I have to set up break points and change it's size that way.

If you do mean this, it's strange that the same code automatically changes size with resolution changes if not placed in an HTML object.

Thanks.

[Pablo]

Are you saying the HTML will not automatically change size and I have to set up break points and change it's size that way.

No, that is not what I was saying.

If you do mean this, it's strange that the same code automatically changes size with resolution changes if not placed in an HTML object.

If you place the code inside an HTML object then it will be restricted to the div of that object

By default, an HTML object has a fixed size. This size can be different in breakpoints.
If the HTML object is part of a layout grid then it will be flexible, which means that it automatically adapts to the size of the screen.

[ghines]

If the HTML object is part of a layout grid then it will be flexible, which means that it automatically adapts to the size of the screen.

Well, this is not what is happening as I have the HTML object inside a layout grid and it is just stuck at the same size no matter what the resolution.

Is there anything I could have done wrong?

Sorry to be a pain, just looking for answers.

[ghines]

Here's the wbs.

https://drive.google.com/file/d/1YTszTV ... sp=sharing

[Pablo]

You did not set the full width property of the HTML object to 'true'.

[ghines]

Fantastic!!!

Thank you very much.

Greg

[ghines]

Well all went great until I added a breakpoint and then the calendar would not auto size like it did without the breakpoint.

See example below:

https://drive.google.com/file/d/18SpL1v ... sp=sharing

Is there a way of fixing this?

TIA

[crispy68]

There are 2 things you need to do:

1. Open up the html box and set the Type to: Do not use <div>
2. On line 26 of the code, locate the iframe code and using the slider, slide to the right until you find the following:

Code: Select all

width="800"

and change it to:

Code: Select all

width="100%"

[ghines]

That worked, thank you very much.

Greg