iui Porting version 0.31 to 0.40 - Background Image length

[skip]

We have a little problem while testing the iui-0.40-dev1 toolset. Our
application is complex but I have simplified the problem which can be
reproduced with the iui sample "music" demo.

In the file music.html add the following line after the line
referencing "#settings"

<li><a href="prob_demo.html">ProblemDemo</a></li>

I will include the prob_demo.html file at the end of this note.
The problem relates to the background image which is rendered. In
version 0.31 of iui when we scroll the resulting long list we see the
pinstripe background running all the way to the bottom of the
display. In version 0.40 the pinstripe runs only slightly below the
bottom of the original screen size and then leaves white background
for the rest of the image. Puzzled. Any thoughts? Does anybody else
get this effect or could it be related to our web server setup? The
browser is Safari 4.0.3 but we get the exact same effect with Firefox.

//////////// Start of prob_demo.html

<div class="panel">
<fieldset style="text-align:left">
<ul>
<li>Tom</li>
<li>Dick</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
<li>Harry</li>
</ul>
</fieldset>
</div>


///// End of prob_demo.html

[Rémi Grumeau]

Same problem here with a class panel page since 0.40.
see at http://img145.imageshack.us/img145/1163/image6w.png

Can't tell why, but it clearly seems like a CSS bug

Le 7 nov. 09 à 11:13, skip a écrit :

[Sean Gilligan]

In iui.css the second CSS selector is "body > *:not(.toolbar)" Within
this selector the rule:
min-height: 372px;
was replaced with:
height: 100%;


Try changing it back...

-- Sean

[skip]

Yep. Fixed. Thanks.
Skip

[Sean Gilligan]

OK, it looks like the suggested fix in Issue #124 may fix things for
some, but breaks things for others. Needs further investigation:
http://code.google.com/p/iui/issues/detail?id=124

-- Sean

[Rémi Grumeau]

Percent percent ...
In CSS, percents are based on the viewport, not the content ;)

put "auto" instead of "100%" and you'll be fine (and uncomment the min-
height)

Check out http://www.beosfrance.com/iphone/ for an sample

Le 9 nov. 09 à 22:06, Sean Gilligan a écrit :

[Rémi Grumeau]

If you still have the problem, i manage to fix it adding this in another CSS file i include just after the iui.css.

body > *:not(.toolbar),
body > .panel {
    height: 	auto;
	min-height:	415px;
}

body[orient="landscape"] > *:not(.toolbar),
body[orient="landscape"] > .panel {
    height: 	auto;
    min-height: 225px;
}

Perhpas this will create bugs elsewhere but for the moment, it seems ok.
Of course, feedback is much appreciate

Remi

Le 8 nov. 09 à 18:30, Rémi Grumeau a écrit :

--~--~---------~--~----~------------~-------~--~----~

You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.

To post to this group, send email to iphone...@googlegroups.com

To unsubscribe from this group, send email to iphonewebdev...@googlegroups.com

For more options, visit this group at http://groups.google.com/group/iphonewebdev?hl=en

-~----------~----~----~----~------~----~------~--~---