Jump to content
kpcollier

Date Picker in iFrames Is Off Alignment

Recommended Posts

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>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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! 

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...