Panel comes up short when using web app capable.

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Use a panel screen of the iui and meta tag:
<meta name="apple-mobile-web-app-capable" content="yes"/>
2. with this meta tag, the bottom chrome is removed from the safari on the
iPhone. And leaves a whites pace with the IUI/ CSS/JS. I use web-app
capable so that I can have more space.

3.  So what I did was modify the CSS to be
body > *:not(.toolbar) {
    display: none;
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 45px;
    width: 100%;
    height: 100%; /*min-height: 372px;*/       
}

Joe, I am not sure whether this will break anything else. BTW- Thanks so
much for the CSS, Images, Scripts. The iui looks great!!!

What is the expected output? What do you see instead?
I was expected a full coverage of the panel.

What version of the product are you using? On what operating system?
Using mainly on Mobile Safari- but also - Firefox and Desktop Safari. 

Please provide any additional information below.

My project is at webkit.mycity.com

Better than Bests, 
Savalas

Original issue reported on code.google.com by SavCoInn...@gmail.com on 25 Mar 2009 at 5:46

[GoogleCodeExporter]

I've reproduced the problem and will try  the suggested height: 100% fix.

Original comment by msgilli...@gmail.com on 26 Aug 2009 at 9:44

• Changed state: Accepted

[GoogleCodeExporter]

Suggested fix (use height: 100%) seems OK, checking in for testing as part of 
0.40 release.
To see change in Hg:
http://code.google.com/p/iui/source/detail?r=ce425baf7bd96cf1f5c2a37b8960a7a3451
e2070

Original comment by msgilli...@gmail.com on 14 Sep 2009 at 12:45

• Changed state: Fixed
• Added labels: Milestone-REL-0.40

[GoogleCodeExporter]

I'm using the 100% iui.css fix, and still doesn't work for all pages using 
.panel

I've got multiple <fieldsets>, and by 317px, the pinstripe's still fall short.

What I am doing is in each page defining (in a <style> tag) "max-height: 
<pagesize>".
Not very dynamic, but it works.

Any other suggestions?

Original comment by assafir...@gmail.com on 14 Oct 2009 at 6:05

[GoogleCodeExporter]

Looks like height: 100%  is a no-go given  feedback on 0.40-dev1:
http://groups.google.com/group/iphonewebdev/browse_thread/thread/226f4f8578f3d97
d

Original comment by msgilli...@gmail.com on 9 Nov 2009 at 9:04

[GoogleCodeExporter]

Original comment by msgilli...@gmail.com on 9 Nov 2009 at 9:05

• Changed state: Started

[GoogleCodeExporter]

OK, I've committed a fix in preparation for iui-0.40-dev2
http://code.google.com/p/iui/source/detail?r=7b1dafcbf6b590ede534751d4ce58b8176d
a867a

I've also added the test case from the iPhoneWebDev thread, you can see it on 
appspot here:
http://iui-js.appspot.com/test/css-tests.html

Original comment by msgilli...@gmail.com on 15 Dec 2009 at 9:00

[GoogleCodeExporter]

I am new to working with HTML and CSS. I was reading through the code and 
cannot understand what the ">" sign means in areas like:
.toolbar > h1.titleImg {
  background: url(title-img.png) no-repeat top center;
  color: rgba(0,0,0,0);
}

body > *:not(.toolbar) {
    display: none;
    position: absolute;
    margin: 0;
    padding: 0;
    left: 0;
    top: 45px;
    width: 100%;
    height: 100%; /*min-height: 372px;*/       
}

This is to modify the display area? So far, this has been a great learning 
experience. Thanks for the code.

Original comment by johndoes...@gmail.com on 8 Dec 2010 at 3:47

[GoogleCodeExporter]

So I think what is needed is a min-height attribute, but I don't think you can 
specify viewport height/width dynamically in CSS.  So this will need to be an 
attribute that gets updated by iUI every time orientation changes, to the 
absolute pixel height of the viewport (minus the height of the toolbar).  I 
think.

Original comment by eslind...@gmail.com on 29 Jul 2011 at 6:24

[GoogleCodeExporter]

Original comment by msgilli...@gmail.com on 25 Sep 2011 at 11:53

• Added labels: Milestone-REL-0.6
• Removed labels: Milestone-REL-0.40