I'm having a problem with iPhone safari bottom bar (the one with back and forward buttons, new tab button and other stuff). In my app, I have an absolute positioned button at the bottom of the screen which is 100% width and almost the same height as the safari bottom bar and my button is that way behind the safari bar and not visible. Is there any way to know if the safari bottom bar is there so that I know when to move my content or even better is there a way to remove it completely?
I tried this:
<meta name="apple-mobile-web-app-capable" content="yes">
And also the minimal-ui tag but it didn't work.
I had the same issue. I don't think there is a way to completely remove the bar.
Although I thought about listening the screen getting resized (because that's what's happening). So I just had a JS/jQuery function that (in my case) changed the min-height of a block to screen height.
$(window).resize(...); // For example
Also adding transition in css would make things look much better (although transitions in mobile safari are also working weirdly if I recall everything correctly)
Hope this helps somehow.
If you find a smarter way to do this, please, let me know!
may be this works
#root {
position: fixed;
height: 100%;
top: 0;
width: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.pane {
flex: 1;
height: 100%;
width: 100%;
}
.bar {
flex-shrink: 0;
height: 50px;
}
<html>
<body>
<div id="#root">
<div class="container">
<div class="pane"></div>
<div class="bar"></div>
</div>
</div>
</body>
</html>
Related
I have developed a site that has a fixed footer and header.
The content is also fixed (but that is only because the footer and header can be hidden, but I won't be showing that in my example).
The issue I have is with iPhones and iPads. They are two issues I have had.
Once is it allowing me to drag the header and footer past the confines of the body/html showing whitespace (no idea why they do this) and the other issue is it stopping scrolling as soon as I let go with my finger.
The latter seems to be solvable by doing this:
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
Although I have read that this is not a supported CSS attribute, it does seem to do the trick.
The second issue I have tried to solve with JavaScript by making the header and footer non-scrollable, but it doesn't seem to work properly.
The JavaScript is simple enough:
function disableElasticScroll(e) {
e.preventDefault();
};
which I can put on an element like this:
ontouchmove="disableElasticScroll(event)"
This does not have the desired effect.
I have set up a codepen to highlight the issue. If you have an ipad, have a look. First drag the content inside the .content area. That works nicely (thanks the the -webkit solution). If you then try and drag the .header or .footer you will notice that you can't drag it and no scrolling is happening (again this is good and is due to the JavaScript), but if you try to then scroll the .content again, you will notice that it drags the entire page and does the elastic scroll rubbish.
https://codepen.io/r3plica/pen/LzRQaZ
There is a way to do this so that you don't have to fix the scrolling container. Try positioning your header and footer with a fixed position then padding the body of your page by the height of those elements. This way your page will scroll normally without any hacks. It might look something like this:
body {
padding-top: 60px;
padding-bottom: 40px;
}
header.global {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
}
footer.global {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
}
html, body {
position: fixed;
}
try setting this css property and see if it works.
It solves the elastic scrolling effect on the body.
Sample page
Output to test on ipad
Frankly I have seen and read so many posts on this topic to the point that I almost shied away from asking the question but none has covered the scope of or solved my problem so far.
I get white screen on this website only when I put the browser on full screen (press F11). The space is even worse on large screens such as 49 inch televisions if their browsers are also put to full screen mode. I am using blankslate theme and used elementor plugin to build the site so I dont have an "official" footer per say. How best can I get rid of this because it looks really ugly on huge screens. Solutions such as this one and the like but they dont work including setting the
height: 100vh; //100% /* in custom.css */
Okay a few things:
Your body has margin of 8px on it:
body {
margin: 0;
}
You want to put height: 100vh; on the inner container of the content. It also has margin-top: -1%; for some reason:
.elementor-element-9q9c7yv {
height: 100vh;
margin-top: 0;
}
This fixes everything except there is an empty div on the bottom that is adding 1px of white space to the footer, get rid of it:
elementor-container elementor-column-gap-no {
display: none;
}
There ya go :)
Try:
html, body {
height: 100%;
}
If that doesn't work, you could put this plus the above:
footer {
position: absolute;
bottom: 0px;
left: 0px;
}
Im trying to get this scrolling effect i have seen on the website http://www.unheap.com , if you scroll to the bottom or to the right you'll notice that you can't scroll past whatsoever. Most website including this one allow you to scroll past slightly with a lot of resistance but I'm trying to replicate the example above where you can't scroll past at all. Anyone know of any plugins or methods on how to go about creating this effect?
The actual website itself is 100% the width and height of the page and any scrolling that occurs is accomplished via an absolutely positioned container with overflow: scroll.
EDIT
The actual overflow is set on the .grid element, which is inside the absolutely positioned .container element.
EDIT #2
The author is also using jScrollPane, but you can prevent the bouncing effect simply by making your body 100% width and height and absolutely positioning a container that has overflow set to scroll.
EDIT #3
See the attached code snippet - (you may have to copy and paste it into it's own HTML file because of the way SO displays snippets). There is no bouncing.
* { margin:0; padding:0; }
html,
body { width: 100%; height: 100%; overflow:hidden;}
body>div { height: 50vh; overflow: auto; padding: 10px; background: #000; position: absolute; width: 100px; top: 100px; left: 100px;}
body>div>div { height: 1000px; background: #0f0;}
<div>
<div>scrollable content</div>
</div>
According the given script
<style>
.x{
background: url('img.jpg') no-repeat;
background-size: contain;
height: 100%;
}
</style>
<div class="x"></div>
It's work fine for chrome and firefox ... any idea how to make it work with IE 7, 8, 9
i tried many scripts and nothing work well like FF and chrome.
IE before 9 does not support background-size:
http://www.css3.info/preview/background-size/
You'll have to come up with a different technique to handle that case. See this for an explanation of workarounds:
http://kimili.com/journal/the-flexible-scalable-background-image-redux
If you want an example (I won't claim it's a great example, but technically speaking, it works), you can look at the code for this site that I worked on last year. The client wanted a background image that scaled to the size of the screen, but also changed when the slides rotated, so it gets a little scary, code-wise:
http://www.buzzhoney.com/
You're going to want to pay attention to the various settings in http://www.buzzhoney.com/Content/style.css
This site was also supposed to be responsive, so there are several levels of #media queries to look at, there. There is a lot in there, and I don't have time to repeat it all, but here are highlights:
Based on this shell of markup (I've removed all the extra stuff that would just get in the way of how these primary elements work together):
<html>
<head>
</head>
<body>
<div id="container">
<div id="header">
<!-- snip header stuff -->
</div>
<div id="main" role="main">
<!-- snip body stuff -->
</div>
<footer id="footer">
<!-- snip footer stuff -->
</footer>
<div id="background">
<div id="background-photo"><img id="bg_0" src="/Content/themes/base/images/index/bg-home-1200x933.jpg" class="opaque"></div>
</div>
<!-- snip js includes, per best practices,
located at the bottom of the page -->
</div>
</body>
</html>
Starting around line 316, we set up initial styles for the background container and its image, but only for devices between 320px and 480px wide, for smartphones. At 416, however, we start to set up styles that will apply from devices 321px wide and up:
#background
{
left: 0;
min-height: 730px;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
height:100%;
}
#background img
{
left: 0;
min-width: 1200px;
position: absolute;
top: 0;
width: 100%;
z-index: -2;
display:block;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
Note how the container (#background) is set to 100% width and height, with a min-height of 730px, and the image inside is set to 100% width, but is given no specific height, just a min-width of 1200px. This basically says that it will scale up, and height will change in proportion to its width, but the width will never go below 1200px, so at that point, the container will collapse around the image and hide the excess that doesn't fit within its area (overflow:hidden).
Note also, that I'm using position:fixed, and a left:0, top:0, to anchor the background container in place, and using a z-index:-1 to place it behind everything else.
There are minor modifications to add some other features at higher resolutions, but nothing alters this basic setup. For your purposes, unless you want the fading/changing backgrounds, you would remove the lines:
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
as they'll make the background image invisible.
I have a <div>...</div> section in my HTML that is basically like a toolbar.
Is there a way I could force that section to the bottom of the web page (the document, not the viewport) and center it?
I think what you're looking for is this: http://ryanfait.com/sticky-footer/
It's an elegant, CSS only solution!
I use it and it works perfect with all kinds of layouts in all browsers! As far as I'm concerned it is the only elegant solution which works with all browsers and layouts.
#Josh: No it isn't and that's what Blankman wants, he wants a footer that sticks to the bottom of the document, not of the viewport (browser window). So if the content is shorter than the browser window, the footer sticks to the lower end of the window, if the content is longer, the footer goes down and is not visible until you scroll down.
Twitter Bootstrap implementation
I've seen a lot of people asking how this can be combined with Twitter Bootstrap. While it's easy to figure out, here are some snippets that should help.
// _sticky-footer.scss SASS partial for a Ryan Fait style sticky footer
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -1*($footerHeight + 2); /* + 2 for the two 1px borders */
}
.push {
height: $footerHeight;
}
.wrapper > .container {
padding-top: $navbarHeight + $gridGutterWidth;
}
#media (max-width: 480px) {
.push {
height: $topFooterHeight !important;
}
.wrapper {
margin: 0 auto -1*($topFooterHeight + 2) !important;
}
}
And the rough markup body:
<body>
<div class="navbar navbar-fixed-top">
// navbar content
</div>
<div class="wrapper">
<div class="container">
// main content with your grids, etc.
</div>
<div class="push"><!--//--></div>
</div>
<footer class="footer">
// footer content
</footer>
</body>
If I understand you correctly, you want the toolbar to always be visible, regardless of the vertical scroll position. If that is correct, I would recommend the following CSS...
body {
margin:0;
padding:0;
z-index:0;
}
#toolbar {
background:#ddd;
border-top:solid 1px #666;
bottom:0;
height:15px;
padding:5px;
position:fixed;
width:100%;
z-index:1000;
}
I just want to be clear on what your saying here:
bottom of the web page (the
document, not the viewport)
Naturally, a div will be at the bottom of the "document", depending on your layout.
If it's not going to the bottom of a document, or not paying attention to how tall your columns are, is it because your floating? Clear: both; would be in order to solve that.
The sticky footers are what I think your looking for, but when you say document, and not the viewport, I get a bit confused. Sticky footers typically do this: Watch for short pages, and if its shorter than the view port, the sticky footer tacks the footer div to the bottom.
Here's some sticky footers (there's gajillions of em, but this is in order of my favorites):
http://www.cssstickyfooter.com/
http://css-tricks.com/sticky-footer/
http://ryanfait.com/sticky-footer/ (listed previously)
http://brassblogs.com/blog/sticky-footer
http://alistapart.com/ (theres one there I just can't find it)
Maybe if you gave a quick illustration or were a bit more specific on what you want? Hope this helps :D
-Ken
Try this: Fixed footers without Javascript. I don't know if it will be a perfect fit, but I think it's close enough.
You can just give the div a:
clear:both; text-align:center;
and put the div as the last element before the closing body statement. That would force it to be the last element without anything next to it.
Your best bet is to use javascript to determine the size of your page. You can get the height with window.innerHeight with non-IE browsers and document.documentElement.clientHeight with IE. With that value you should be able to absolutely position your element on the page setting top to that value minus the height of your div. If the height of your div is variable you will need to check the div's offsetHeight property to get the real height.
For centering use the following example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.wrapper
{
width: 100%;
padding-left: 50%;
}
.test
{
width: 400px;
margin-left: -200px;
border: 1px solid black;
padding-left: -200px;
}
</style>
</head>
<div class="wrapper">
<div class="test">This is a test</div>
</div>
</html>
You have a wrapper div around the div you want centered. The wrapper div has a width of 100% the inner div has a width set to whatever you want it to be. Give the wrapper div a left padding of 50% and the inner div a negative left margin equal to half of its width.