Add horizontal scrollbar to iframe

[shainis]

Hi, I’d like to add a horizontal scrollbar to iframe that contains a google calendar.
I don’t want that the frame will be responsive, because the calendar is huge and I’d like to allow the users to scroll horizontally.
It should look like this one (the upper one): https://sites.google.com/a/amith.tzafonet.org.il/tsad/home/ywmn-yrwym

I added the embed code of the calendar in a Text element.

and added CSS to the page:

.container {

overflow: scroll; 
width: 1200px;
height: 600;

}

But I don’t get to see the horizontal scrollbar.

My page is: https://amithazor.online/לוח-שנה/

I’ll appreciate your help with that. Thanks!

[friech]

Hi Shai,

Thank you for writing in, regretfully there is no way for us to styling the Google Calendar as that is a 3rd party widget. I did some Googling and that seems to be a bug on Google Calendar.

how to put a horizontal scrollbar on Google Calendar

Thanks,

[shainis]

I found a solution:

CSS:
body {
width: 100%;
overflow-x: scroll;
padding: 0;
margin: 0;
}

and set the width of the element to 1200px.

That’s it

[lely]

Hi Shai,

Please make the CSS page specific. That will not work well on other pages. Try adding the page class on body like this:

body.page-id-872 {
width: 100%;
overflow-x: scroll;
padding: 0;
margin: 0;
}

Hope this helps.