Demo Image like footer and fixed header - iUi

51 views
Skip to first unread message

Atanu Shome

unread,
Apr 16, 2014, 6:14:51 AM4/16/14
to iphone...@googlegroups.com
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 http://www.iui-js.org/documentation/latest/getting-started.html 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?

remi.g...@gmail.com

unread,
Apr 16, 2014, 7:30:55 AM4/16/14
to iphone...@googlegroups.com
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) :)

Remi
--
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 iphonewebdev...@googlegroups.com.
To post to this group, send email to iphone...@googlegroups.com.
Visit this group at http://groups.google.com/group/iphonewebdev.
For more options, visit https://groups.google.com/d/optout.

Atanu Shome

unread,
Apr 17, 2014, 1:52:40 AM4/17/14
to iphone...@googlegroups.com
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 http://jsfiddle.net/LkgpX/240/

remi.g...@gmail.com

unread,
Apr 17, 2014, 2:25:26 AM4/17/14
to iphone...@googlegroups.com
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: http://jsfiddle.net/VK374/

Atanu Shome

unread,
Apr 17, 2014, 2:28:13 AM4/17/14
to iphone...@googlegroups.com
Wonderful :) Thank you so much
Reply all
Reply to author
Forward
0 new messages