Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML HTML Basics

iframe to large on Mobile Safari (iPad).

Discussing Html . Code , Software , other

Moderators: macek, egami, gesf

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;
}
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 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
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 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.
seandisanti
php-forum Fan User
php-forum Fan User
 
Posts: 773
Joined: Mon Oct 01, 2012 12:32 pm


Return to HTML Basics

Who is online

Users browsing this forum: No registered users and 2 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.