I'm working on a web app and I need to get a div to stick to the bottom of the viewport. Always viewable and always on the bottom of the viewport. There's an example of what I want here: footer. Unfortunately, this doesn't work on the iPhone. I can think of some ways to do this using javascript but I would rather not. Any ideas on how to get this effect on the iPhone using only css?
This situation has changed with iOS 5. Now you can use overflow:scroll or position:fixed and it will do what is expected. For example, this type of code:
<header style="
position: fixed; top: 0; left: 0;
width: 100%; height: 20px; font-size: 20px">
Heading
</header>
<article style="margin: 20px 0">
Your page here
</article>
<footer style="
position: fixed; bottom: 0; left: 0;
width: 100%; height: 20px; font-size: 20px">
Footer
</footer>
...should work without problems.
Though there are still many devices running older iOS versions, so you might want to lazy-load Scrollability on older devices, which you can test with this javascript:
var isios = navigator.appVersion.match(/CPU( iPhone)? OS ([0-9]+)_([0-9]+)(_([0-9]+))? like/i);
// if that succeeds, it usually returns ["CPU OS X_Y_Z like",undefined,X,Y,Z]
if (isios && isios[2] < 5){
// load scrollability here. jquery example:
$.getScript("/js/scrollability.min.js", function() {
// code to run when scrollability's loaded
}
}
You can't. At least not the way you think.
You have to fake the entire thing is javascript. Use something like iScroll
It sort of sucks but Mobile Safari does not support any kind of fixed positioning at all. So you have to make the page size equal to the screen size and then use javascript to handle touches and set scroll offsets and animate scrollbars and what not manually.
This script I linked does a lot of that for you, but it's not as robust as a native solution would be.
Here is an example on how to combine CSS3, HTML, and JavaScript to create a navbar for the iPhone.
http://www.mindovercode.com/2010/09/12/iphone-navbar-using-xui/
ps: It does work in landscape mode.
Here is a working example, with code. It is not for the faint of heart:
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
There is a new JavaScript for this that works much easier: http://joehewitt.github.com/scrollability/
Therefore in iOS 5 there will be fixed position and overflow scroll available!
Related
I am trying to make my design mobile friendly. What I have is that everything fits nicely when I look at the design on http://ipadpeek.com/ (Great Tool!) although when I actually view it through my iPhone 4 the content only takes up around 80% of the page, whereas the remaining 20% is a white background.
There is only one element which appears to fit the whole width and this has the following style:
<div class="text-elements">
<h2>Your website can achieve...</h2>
</div>
.text-elements {
float: none;
margin: 0;
padding: 75px 10px;
h2 {
font-size: 4em;
width: 100%;
}
}
Any ideas why this is happening?
FYI most of the online iPad style tools such as http://ipadpeek.com/ don't tend to pick up any of these overflow issues anyways.
In the end I found that the issue was at least one or more divs which had explicit widths set, but which were quite hard to find as culprits!
Tips for anyone else with this problem:
If you know any design will be responsive, use max-width: Xpx, width: 100%, in your main stylesheets on any explicit width divs to avoid them becoming a culprit in later course.
When using width: 100% on items, make sure you add any additional padding to the inner div (especially if it is in pixels), or account for it such as width: 95%, padding: 2.5%.
Try overflow: hidden on some of the main wrappers which hold your content to see where issues are coming from.
I'm seeing strange behavior on an iphone 4s device when it comes to specifying sizes of a div in pixel units.
My iphone is 980 pixels wide in portrait orientation.
As a first test, I just created a plain html implementation. This works exactly as expected - the div takes up the entire width of my screen, but is no wider:
<body>
<div style="width:980px; height: 30px; background-color: red;"></div>
</body>
Now in GWT, I try the same thing (at least I think it's equivalent):
FlowPanel fp = new FlowPanel();
fp.setWidth("980px");
fp.setHeight("30px");
fp.getElement().getStyle().setBackgroundColor("red");
RootPanel.get().add(fp);
but when loaded on my iphone, the div appears to be twice the width of the screen. Is GWT doing some kind of scaling automatically? I know the iphone 4S is a retina display, therefore it has a 2x pixel ratio. Is it something related to that?
I can't examine the output html on my iphone, but when I look at the GWT version in firefox, I can see GWT is indeed outputting the 980px size I specified:
// What GWT outputs - looks the same as my hand-written version:
<div style="width: 980px; height: 30px; background-color: red;"></div>
So why would the GWT version render the div 2x as wide?
------ Update ----------
As Woojah recommended, I tried via a style definition:
.sanityTest {
width: 980px;
height: 30px;
background-color: green;
}
FlowPanel fp = new FlowPanel();
fp.setStyleName("sanityTest");
but still the same behavior - on the iphone 4s screen, the div is twice the width of the display. The dom looks exactly the same as in my handwritten version. The size behaves correctly on a non-retina device.
Thank you
I would recommmend you try the following:
do:
getElement().getStyle.setWidth(x, Style.Unit.PX);
getElement().getStyle.setHeight(y, Style.Unit.PX);
That is the equivalent for your
style="width:980px; height: 30px; background-color: red;
Another alternative is to defina inside your css stylesheed a class like
.yourCss
{
width:980px; height: 30px; background-color: red;
}
and then in your code do flowPanel.setStyleName("yourCss");
im having some problems to understand how to render a web page in a decent way on the iPhone, i think the problem have to be releated with the margin-left but i have no idea how to solve the problem in order to have a good render on pc and mobile.
Here is how it looks on a pc browser:
Sorry for so many white spaces, is just to clarify the div is centered. And this is how its looks on my iPhone:
Even if a move the page with my finger im not abble to see the left side of the blue ribbon, it is just "out of the screen".
This is my code (part of it):
CSS
#center-coupon {
width: 474px;
height: 255px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -237px;
margin-top: -150px;
text-align: center;
}
#rib {
background-image:url(img/ribbon.png);
height:75px; width:474px;
}
#main4 {
position:relative;
background-color:#eeeeee;
height:300px;
width:340px;
left:66px
}
Html
<div id="center-coupon">
<div id="rib"></div>
<div id="main4">
<p style="font-size:35px;font-weight:bold;padding-top:15px;">El bar de mou</p>
<p>coupon awarded to</p>
<img src="http://graph.facebook.com/XXXXXXXXXX/picture" alt="profile picture" class="img-polaroid">
<span style="font-size: 25px; font-weight:bold;"> Domingo</span>
<p style="margin:10px 0 0 0; font-size: 17px;">Valid for: <b>Beer moretti 0.2l</b></p>
<p>created on 2012-10-21</p>
<a data-toggle="modal" href="#destroy_c" class="btn btn-danger btn-large">Destroy Coupon</a>
</div>
</div>
I know the center-coupon div is widder than the iphone screen, but that does not explain why im not abble to see part of the left side of the ribbon... A good solution will be forse the iphone to render the site with less zoom, but i dont know if that is possible, and dont know if that propety will be compatible with other mobile platforms. So what do you think?
I am no iPhone expert, but it is my understanding that the pixel density of the device has nothing to do with the CSS pixels. So, as far as CSS is concerned, the width of the phone is 320px. You are positioning the left edge of the coupon in the middle of the page, then moving it 237 pixels to the left, which essentially places it off of the screen. Have you tried changing the negative margin to a smaller amount?
You're negative margin is more than half the viewport width of an iPhone, therefore it is dragging it out of view.
If you want to center an element, you can use margin: auto (so long as an explicit width is set) rather than positioning the element with absolute positioning.
How do I center align fluid layout (no fixed px values, only % values) for multiple screens ?
i.e. I am going to view the same HTML on desktop (can be multiple resolutions), can be mobile (e.g. iPhone) OR even a tablet (e.g. iPad).
I think the following solutions would not work in my case;
Using width:100% (there won't be any space left to center align)
Using widdth:80% or so and then using margin:0 auto (this would
work fine on desktops, but would waste space on mobile devices..i.e i
want to optimize limited space on mobile devices)
Using text-align:center (I want to center align the layout and not
the text)
Please suggest.
<div style="width:100%; text-align:center;">
<img style="margin:auto; display:block;" src="images/web_banner.gif"/>
<p>Website coming soon…</p>
</div>
Use align="center" in div then u will get content in div will center
It's extremely difficult to set a page unless it's just text to be completely liquid. Just because images need to be displayed at a certain size and then would need to be re-sized to fit smaller resolutions. That being said if this is just a text based site then the
width: 80%;
margin: 0 auto;
text-align: center;
iphone supports the the margin so this should work fine. If you have images and need to resize then you should really look at a jquery or javascript to adjust the images on resize.
Also use the text-align: center for backwards compatibility. Use all of that as a wrapper and then set for you content and navigation
text-align: left;
I use a modal div as overlay to kind of disable the background page while the overlay DIV is open. Here is the code;
#TB_overlay {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
Now this works fine on desktop browsers, but on the iPad, the overlay window only covers upto the screen height and not the entire page. How do I fix this issue?
I know there are some known position:fixed issues and also giving a fixed px height value can fix this issue?
But please let me know if there is any other workaround for this issue.
I solved this on my site by using jQuery to calculate the size of the whole page and then setting the overlay height accordingly.
Conveniently enough the iPad supports:
<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”css/portrait.css”>
and/or
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”css/landscape.css”>
I recommend using min-width / min-height in your ipad.css file.