Help with google calendar

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
ghines
 
 
Posts: 33
Joined: Sat May 16, 2015 7:01 am
Location: New South Wales, Australia

Help with google calendar

Post by 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
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Help with google calendar

Post by 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
 
 
Posts: 33
Joined: Sat May 16, 2015 7:01 am
Location: New South Wales, Australia

Re: Help with google calendar

Post by ghines »

Pablo wrote: Thu Feb 11, 2021 7:10 am 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.
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Help with google calendar

Post by 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
 
 
Posts: 33
Joined: Sat May 16, 2015 7:01 am
Location: New South Wales, Australia

Re: Help with google calendar

Post by 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.
User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Help with google calendar

Post by 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
 
 
Posts: 33
Joined: Sat May 16, 2015 7:01 am
Location: New South Wales, Australia

Re: Help with google calendar

Post by 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
 
 
Posts: 33
Joined: Sat May 16, 2015 7:01 am
Location: New South Wales, Australia

Re: Help with google calendar

Post by ghines »

User avatar
Pablo
 
Posts: 21578
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Help with google calendar

Post by Pablo »

You did not set the full width property of the HTML object to 'true'.
ghines
 
 
Posts: 33
Joined: Sat May 16, 2015 7:01 am
Location: New South Wales, Australia

Re: Help with google calendar

Post by ghines »

Fantastic!!!

Thank you very much.

Greg
ghines
 
 
Posts: 33
Joined: Sat May 16, 2015 7:01 am
Location: New South Wales, Australia

Re: Help with google calendar

Post by 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
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Help with google calendar

Post by 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
 
 
Posts: 33
Joined: Sat May 16, 2015 7:01 am
Location: New South Wales, Australia

Re: Help with google calendar

Post by ghines »

That worked, thank you very much.

Greg
Post Reply