iframe to large on Mobile Safari (iPad).

Discussing Html . Code , Software , other

Moderators: macek, egami, gesf

chris122380
New php-forum User
New php-forum User
Posts: 30
Joined: Mon Jun 25, 2012 12:41 pm

iframe to large on Mobile Safari (iPad).

Postby chris122380 » Fri Aug 17, 2012 11:14 am

I am working on a demo site. Can be found at http://chris122380.x10.mx/demo/. There is a iframe on the left side called ileft.

Code: Select all

#ileft {
   width: 450px;
   height: 600px;   
}

<iframe name="ileft" id="ileft" border="0" frameborder="0"></iframe>


It looks correctly on the desktop but on the iPad the iframe seems to open the full page of what it's linked to wish means the iframe thinks it's bigger on the iPad then it really is. I am going to run a HTML and CSS Validation to see what errors I get. Any help would be great. If you need all the code posted please let me know as I'd have to post the code in the post unable to upload attachments yet.

chris122380
New php-forum User
New php-forum User
Posts: 30
Joined: Mon Jun 25, 2012 12:41 pm

Re: iframe to large on Mobile Safari (iPad).

Postby chris122380 » Fri Aug 17, 2012 12:21 pm

Validation checks were ok with no errors associated with this problem. Still having the problem with Safari iOS iPad having the iframe render to long.

I have switched from HTML5 (As there where no HTML5 elements needed) to HTML 4.0 Transitional and CSS3. No validation errors and still have the width of the iframe problem on a iPad.

I am also unsure were to put

Code: Select all

-webkit-overflow-scrolling:touch

chris122380
New php-forum User
New php-forum User
Posts: 30
Joined: Mon Jun 25, 2012 12:41 pm

Re: iframe to large on Mobile Safari (iPad).

Postby chris122380 » Mon Aug 20, 2012 11:00 am

My ileft iframe is now showing a Horizontal scroll bar for a page that has no further content to the right. I still haven't been able to get the iframe to work correctly on the iPad as the width is still going full page instead of the width. I have removed unneeded tables and divs.

index.php

Code: Select all

<?php
session_start(); //start session and list variables as session variables
$_SESSION['pdf'] = 'pdf';

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Closeout System</title>
         
    <link href="style/style.css" rel="stylesheet" type="text/css">
   <style type="text/css">
   .h1_main {
      font-family: "Century Gothic";
      font-size: 40px;
      font-weight: bold;
      
   }
   </style>
</head>

<body>

<div id="body">





   <table style="width: 100%">
      <tr>
         <td><img alt="Manuals Access Logo" src="images/MA-Logo-Web.png" width="80" height="61"></td>
         <td class="h1_main">Closeout System</td>
      </tr>
   </table>

<br>

   <div id="menu">
           <?php include_once("menu_template.php"); ?>
      </div>
            
               
               <iframe name="ileft" id="ileft" frameborder="0"></iframe>
            
                        
               <iframe src="http://www.w3schools.com" id="info" name="info_frame" scrolling="no" frameBorder="0"></iframe>
               <img alt="" src="images/key.jpg" id="key" >               
               
               
                  <p id="docview">Document View</p>
                        
      
               <iframe name="pdf" frameborder="0" id="pdf"></iframe>
               
               
<div></div> <!-- Copyright bar at bottom of page  -->

</div> <!-- end of body div-->


</body>
</html>


style.css

Code: Select all

* {
    margin: 0px;
    padding: 0px;
   
}

html,body{
    height: 100%
}

body {
background-color:#7E93C3
}

#body {
   background-color: #FFD320;
   margin: 0px auto 0px auto;
   width: 1024px;
   height: 100%; /* 800px default */;
   margin: 0px auto 0px auto;
   position: relative;
   top: 0px;
   left: 0px;
   bottom: 0px;
}

h1 {
   text-align: center;
   font-size: 40px;
}


#menu {
   width: 200px;
   text-align: center;
}

#menu a {
   border: #666 1px solid;
   border-bottom:none;
   padding-top: 8px;
   padding-bottom: 1px;
   padding-left: 8px;
   padding-right: 8px;
   text-decoration:none;
}

#menu a:hover {
   background-color:orange;
   
}

myButtons {
   background-color: #036;
   color: #FFF;
}

myActiveButton {
   background-color: #BAE4FE;
   color: #000;
}

#bodyContainer {
   height: 664px;
   width: 513px;
   border: #666 1px solid;
   background-color:aqua;
}

#bodyContentContainer {
   padding:0px;
   left: 0px;
   bottom: 0px;
   right: 0px;
   
}

#ileft {
   position:absolute;
   height: 600px;   
}

#pdf {
   background-color: green;
   position: absolute;
   
   right: 0px;
   width: 505px;
   height: 375px;
   margin: 0px;
   top: 400px;
   
   
}

#docview {
   position:absolute;
   top: 368px;
   left: 518px;
}

#info {
   position: absolute;
   top: 165px;
   right: 25px;
   left: 535px;
   height: 200px;
   width: 300px;
      
   }
   
#key {
   position: absolute;
   width: 18%;
   right: 0px;
   top: 165px;
}

nandha
New php-forum User
New php-forum User
Posts: 1
Joined: Mon Nov 05, 2012 5:07 am

Re: iframe to large on Mobile Safari (iPad).

Postby nandha » Mon Nov 05, 2012 5:09 am

Hi,
will you able to fix this issue? I am facing the same issue.
Please let me know if you fixed this issue. Thank in advance.
Nandha

seandisanti
php-forum Fan User
php-forum Fan User
Posts: 838
Joined: Mon Oct 01, 2012 12:32 pm

Re: iframe to large on Mobile Safari (iPad).

Postby seandisanti » Wed Nov 14, 2012 10:47 am

can use @media only screen css to format based on display size. here's a good link for usage and sizes for different devices. http://css-tricks.com/snippets/css/medi ... d-devices/ i've used that technique on several sites, but most often on wordpress sites to hide side bar content when viewed on mobile devices.


Return to “HTML Basics”

Who is online

Users browsing this forum: No registered users and 0 guests