kpcollier Posted February 11, 2020 Report Share Posted February 11, 2020 I am using iframes to display multiple datapages in a navigation bar style workflow. You can find it in this Caspio HowTo article. It works pretty good, except for the fact that the date picker when trying to edit a record is not in line with the field. This isn't the biggest problem until you get to records towards the bottom of the page, then the date picker is so far off align that it pops up out of the page, making it impossible to make a selection. Anyone have any idea? <head> <style> </style> </head> <style> .ui-resizable-helper { border: 1px dotted gray; } ul#menu .activeMenu { background: #bb3033; } ul#menu { width: 100%; background: #21618C; font-size: 10px; font-family: "Arial", sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; text-align: center; } ul#menu li { display: block; display: inline-block; margin: 4px 0 0 0; padding: 5px 15px 5px 15px; cursor:pointer;} ul#menu li a {color: #fff; text-decoration: none; display: block; line-height: 200%; } ul#menu li a:hover { color: #333; } .content{display:block; width: 100%; height:1024px; padding: 10px; border:2px solid #21618C; overflow:hidden; position:relative;} .ChannelView{ width:100%; height:100%; margin-bottom:100%;} @media (max-width: 1024) { .content{ width: 96.6%; } } li { font-size: 11px !important; font-weight: bold !important; } </style> <script> function getElementByClass(classer) { var allHTMLTags=document.getElementsByTagName("*"); var array = []; for (i=0; i<allHTMLTags.length; i++) { if (allHTMLTags[i].className==classer) { array.push(allHTMLTags[i]); }} return array;} function channel(n){ var links_1337 = document.querySelectorAll("ul#menu li"); links_1337.forEach(function(elem, idx) { console.log(n, idx) if (idx == n) elem.className = "activeMenu"; else elem.className = ""; }); var frames = getElementByClass("ChannelView"); var length = frames.length; for(var i = 0; i < length; i++) { if(frames[i].id == ("viewer"+ n)) { frames[i].style.display = "inline"; }else{ frames[i].style.display = "none";}} } </script> <div style="display:block; text-align:left;"> <div style="display:block;"> <ul id="menu"> <li><a onclick="channel(0)">NEW ORDER</a></li> <li><a onclick="channel(1)">SHIP DATE/CONFIRMATION</a></li> <li><a onclick="channel(2)">MATERIAL CHECK-IN</a></li> <li><a onclick="channel(3)">SHIPPING CALENDAR</a></li> <li><a onclick="channel(4)">ALL PENDING ORDERS</a></li> <li><a onclick="channel(5)">COMPLETED ORDERS</a></li> </ul> </div> <div class="content"> <iframe frameborder=0 id="viewer0" class="ChannelView" src="www.caspio.com" style="display:inline"></iframe> <iframe frameborder=0 id="viewer1" class="ChannelView" src="www.caspio.com"></iframe> <iframe frameborder=0 id="viewer2" class="ChannelView" src="www.caspio.com"></iframe> <iframe frameborder=0 id="viewer3" class="ChannelView" src="www.caspio.com"></iframe> <iframe frameborder=0 id="viewer4" class="ChannelView" src="www.caspio.com"></iframe> <iframe frameborder=0 id="viewer5" class="ChannelView" src="www.caspio.com"></iframe> </div> </div> Quote Link to comment Share on other sites More sharing options...
geoffdude Posted February 12, 2020 Report Share Posted February 12, 2020 My first thought is you CSS in causing errors. The form CSS may be the issue .. but it's hard to determine without seeing the form live. Some things to try on the code you provided are as follows: <style> .ui-resizable-helper { border: 1px dotted gray; } ul#menu .activeMenu { background: #bb3033; } ul#menu { width: 100%; background: #21618C; font-size: 10px; font-family: "Arial", sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; text-align: center; } ul#menu li { display: block; display: inline-block; margin: 4px 0 0 0; padding: 5px 15px 5px 15px; cursor:pointer;} ul#menu li a {color: #fff; text-decoration: none; display: block; line-height: 200%; } ul#menu li a:hover { color: #333; } /* FIX(1) move li styles here */ li { font-size: 11px !important; font-weight: bold !important; } /* FIX(2) get rid of padding, border, make width 100%, get rid of display block and position too, make background grey for testing only */ .content{width: 100%; height:1024px; background: #e5e5e5; padding: 0px; border:0px solid #21618C; overflow:hidden;} /* FIX(3) get rid of padding, make width 50% (iFrame width), make background blue (iFrame background color) for testing only */ .ChannelView{ width:50%; height:100%; margin-bottom:100%; background:#aae2ee;} /* FIX(4) disable this media query as it does nothing for this page @media (max-width: 1024) { .content { width: 96.6%; background: #ff0000 !important; } } */ </style> Let see what this style code change does, then go from there. kpcollier 1 Quote Link to comment Share on other sites More sharing options...
kpcollier Posted February 12, 2020 Author Report Share Posted February 12, 2020 15 hours ago, geoffdude said: Let see what this style code change does, then go from there. Thanks, geoffdude. Your CSS worked. All I had to do was switch the width: 50% to 100% in the ChannelView rule. The date picker seems fine now! Quote Link to comment Share on other sites More sharing options...
geoffdude Posted February 12, 2020 Report Share Posted February 12, 2020 Excellent .. happy to help. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.