Wrapper content Issue in IPad Simulator

RRoberts's Avatar

RRoberts

15 Feb, 2015 06:27 PM

Hi

After getting the background image to work properly in the ipad - it works in landscape and portrait with no issue.

But when I put the wrapper (white background) - it works well in landscape showing the background image AND wrapper background.
In the Portrait, the wrapper consumes the size - showing no main background at all.

I am not sure why...I have tried to make the wrapper, 700px which did not work at all, then tried 400px - it didn't work either

html, body {
    margin:0;
    padding:0;
    height:100%;
    background-size: cover;
    background-image: url('boo.png') !important;
    background-repeat: no-repeat;
    background-attachment: scroll;
    overflow-x: hidden;
}

#wrapper {
    background: #FFF !important;
    min-height:100%;
    position:relative;
    width:400px;
    margin:0 auto;
    margin-bottom:-60px; /* Negative Height of Footer */
}

<!DOCTYPE html>
<html>
    <head>
    <meta name=viewport content="width=device-width, initial-scale=1.0, minimum-scale=0.5 maximum-scale=1.0">
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-2.6.2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript">></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <link rel="stylesheet" href="@Url.Content("iPadmain.css")" type="text/css">
    <!--[if !IE 7]>
<style type="text/css">
#wrapper {display:table;height:100%}
</style>
    <![endif]-->
    <!--This is needed to ensure CSS will recognise the elements in the browsers that aren't adapted to HTML5-->
    <!--[if IE]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <div id="wrapper">

        
    </div>
    <!--end wrapper-->
</body>
</html>

Can you please help?

Many thanks

  1. 1 Posted by RRoberts on 15 Feb, 2015 06:38 PM

    RRoberts's Avatar

    Hi again

    It seems to be caching it; no matter how many times I tried to delete the history on Chrome Browser.

    How do you delete the caching for ipad simulator - electric plum?

    Many thanks

  2. 2 Posted by RRoberts on 15 Feb, 2015 08:23 PM

    RRoberts's Avatar

    Hi

    I have managed to get it cleared under the settings->caching on next restart.

    However, I am stumped why the footer on the portrait is not showing but is showing on the landscape. No height has been defined but width has been set to 700px.

    Any ideas?

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

16 Oct, 2021 02:38 PM
06 Oct, 2021 05:12 AM
20 Sep, 2021 04:14 PM
02 Aug, 2021 04:22 AM
29 Jul, 2021 07:22 AM