Hi everyone,
I need my <Iframe> to display under the breadcrumb proxy, above the footer, and inside of the body elements while the body elements retains the size of the <iframe>. I need my <body> and <iframe> code to have scroll bars and be responsive.
The <iframe> code includes an external website (calendar) that must be embedded within the website.
I am open to other ideas for a calendar solution that my activities coordinator can use to just post events. No scheduling and view only by the end users.
Am I having a blond, senior moment or what am I missing? HELP and thank you.
Code:
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="2" MadCap:lastHeight="85" MadCap:lastWidth="1083" class="calendar">
<head><title>Calendar</title>
<style type="text/css">
body {scrolling:yes;
}
iframe {position:absolute;
z-index:0;
top:20%;
left:15px;
}
</style>
</head>
<body>
<h1>Calendar</h1>
<iframe src="https://eventclockwerk.com/meetingfinder/cal.php?z=51" height="100%" width="95%" scrolling="yes" frameborder="0" border="0" allowfullscreen="true"></iframe>
</body>
</html>
iframe scrolling issue
iframe scrolling issue
You do not have the required permissions to view the files attached to this post.
Re: iframe scrolling issue
FIXED using the following code:
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="2" MadCap:lastHeight="1083" MadCap:lastWidth="1083" class="calendar" style="height:100%">
<head><title>Calendar</title>
<style type="text/css">
body {scrolling:yes;
}
iframe {position:relative;
z-index:0;
left:15px;
top: 0;
bottom: 0;
}
</style>
</head>
<body style="height:100%">
<h1>Calendar</h1><iframe src="https://eventclockwerk.com/meetingfinder/cal.php?z=51" height="800px" width="95%" scrolling="yes" frameborder="0" border="0" allowfullscreen="true" style="float:inherit"></iframe>
</body>
</html>
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:lastBlockDepth="2" MadCap:lastHeight="1083" MadCap:lastWidth="1083" class="calendar" style="height:100%">
<head><title>Calendar</title>
<style type="text/css">
body {scrolling:yes;
}
iframe {position:relative;
z-index:0;
left:15px;
top: 0;
bottom: 0;
}
</style>
</head>
<body style="height:100%">
<h1>Calendar</h1><iframe src="https://eventclockwerk.com/meetingfinder/cal.php?z=51" height="800px" width="95%" scrolling="yes" frameborder="0" border="0" allowfullscreen="true" style="float:inherit"></iframe>
</body>
</html>