Demo Image like footer and fixed header - iUi

Skip to first unread message

Atanu Shome

Apr 16, 2014, 6:14:51 AM4/16/14
I want to use iUi to convert one of my cordova app to iphone look. I want a fixed header like jquery mobile. Is there any property in iUi for this?

And there is footer in most images on the documentation. Like here in the first mobile UI image there is a small blue footer. I can't footer in any of the example files after download. How to activate that footer and use that. Am I missing something?

Apr 16, 2014, 7:30:55 AM4/16/14
The topbar, by default, has position: absolute, which means it keeps its position at a 0,0 position on the layout.

You can change to position: fixed in the css, so it's fixed on the screen.

Bottom bar you see is the navigator one (Safari) :)

You received this message because you are subscribed to the Google Groups "iPhoneWebDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to
To post to this group, send email to
Visit this group at
For more options, visit

Atanu Shome

Apr 17, 2014, 1:52:40 AM4/17/14
Thank you for your reply. And thanks for informing about the footer. I've already tried position fixed and that is breaking the style. Like this

Apr 17, 2014, 2:25:26 AM4/17/14
Position fixed puts the DOM element out of the flow. Being out, it can't inherit from other to set its box model parameters. 

That's why it's trying to set its width based on its content rather than full width. Forcing full width do the job. Then you get a z-index issue so you have to increase it too.

Code could be
<div class="toolbar" style="width:100%;position:fixed;z-index:99">

Working exemple:

Atanu Shome

Apr 17, 2014, 2:28:13 AM4/17/14
Wonderful :) Thank you so much
Reply all
Reply to author
0 new messages