Using Inline "Style"-Attribute properly

Asked Dec 04 '17 at 21:47

Active Dec 04 '17 at 21:51

Viewed 31 times

I am currently trying to integrate a Google calender via Iframe and using inline attributes. I have the following solution but for any reason there is nothing displayed. Can anybody tell me what is going wrong here :(? I am using a CMS and therefore I need a responsive solution via the inline attributes.

<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">

  <iframe src="https://calendar.google.com/calendar/embed?showTitle=0&amp;showDate=0&amp;showPrint=0&amp;showCalendars=0&amp;showTz=0&amp;height=600&amp;wkst=2&amp;hl=nl&amp;bgcolor=%23FFFFFF&amp;src=example.be_cpkbjcpttgb5q0%40group.calendar.google.com&amp;color=%23ffcf03&amp;ctz=Europe%2FBrussels"
    style="position: absolute; top:0; left: 0; width: 100%; height: 100%; border-width:0;" width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>

edited Dec 04 '17 at 21:51

Quentin

914,110
126
1,211
1,335

asked Dec 04 '17 at 21:47

Math Programmer

Possible duplicate of [How to apply CSS to iframe?](https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe) – Obsidian Age Dec 04 '17 at 21:49
That link even has an answer **specific** to Google Calendar. – Obsidian Age Dec 04 '17 at 21:50
1

I can't reproduce the problem. When I run the code it displays an error message. That is not "nothing". – Quentin Dec 04 '17 at 21:52
I imagine `height: 0; overflow: hidden;` is the issue. – steveax Dec 04 '17 at 21:57
Which error? I did a drag and drop in the browser... and nothing was displayed... – Math Programmer Dec 04 '17 at 21:57

Using Inline "Style"-Attribute properly

0 Answers0