Date Picker in iFrames Is Off Alignment

kpcollier · 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>

geoffdude · 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 · 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!

geoffdude · February 12, 2020

Excellent .. happy to help.

Login

Date Picker in iFrames Is Off Alignment

Recommended Posts

kpcollier

Link to comment

Share on other sites

geoffdude

Link to comment

Share on other sites

kpcollier

Link to comment

Share on other sites

geoffdude

Link to comment

Share on other sites

Join the conversation

Browse