I am attempting a layout consisting of header, content and footer. The header and footer should always be shown and the content should expand to fill any space remaining. I have implemented this in this jsfiddle; https://jsfiddle.net/SuperMe79/204wd5sv/42/
.app {
display: flex;
height: 100vh;
flex-direction: column;
flex-wrap: nowrap;
background-color: lightyellow;
}
.header {
flex-shrink: 0;
background-color: lightsalmon;
}
.content {
flex-grow: 1;
/* this adds a scrollbar when the content takes up more space than available to display */
overflow: auto;
background-color: lightgreen;
}
.footer {
flex-shrink: 0;
background-color: lightblue;
}
In the jsfiddle you can see a browser overlay obscures the footer at the bottom. I have a similar problem on my phone where the browser navigation controls obscure the footer.
I can scroll down further but that is a bad user experience.
I want the header, footer to always be visible. I can set the height to less than 100vh but this isn't ideally as it's a fudge and the footer is not longer at the bottom of the view on a browser without an overlay such as on my desktop.
Any thoughts on how to resolve this?
This is a similar issue to these questions but I've used a different approach to positioning and they haven't been answered.
Android browser bottom control bar overlays content
Chrome `position:fixed; bottom: 0;` obscured by Android UI
Try height: 100% instead of height: 100vh. You'll probably also need to assign 100% height to every container:
/* full height for every wrapping element and the app itself */
body,
html,
#app,
.app
{
height: 100%;
}
.app {
display: flex;
flex-direction: column;
}
I've got both #app and .app there because your JSFiddle example has both.
Add followings top of the style.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
Sample is in this link https://codepen.io/LakshithaMadushan/pen/BaoxvNv
Related
I want to push the bottom toolbar when a mobile keyboard (from the chrome app) is shown.
Please see these images:
There is a toolbar for the content editable element.
When the keyboard is shown, the toolbar does not get pushed above the keyboard.
I use this style:
.toolbar {
width: 100%;
display: flex;
padding: 1rem 0 2rem 0;
position: fixed;
bottom:0;
right:0;
left:0;
}
Please help.
Set 100vh as height in your code of your body tag...
I'm working on a page with a long scrollable background image of the road. The page is intended for mobile devices primarily. I need to align several items (containers with text and images) according to the background so that those items would be located near certain points on the road.
The problem is that my background image width and height is changing depending on the mobile device screen, while the items preserve their position, and thus not aligned with the road anymore.
How can I fix this issue using SASS/CSS?
You can use vw css unit to place the content element relative to screen width.
<div class="container">
<div class="content">Content</div>
</div>
.container {
background: url("//placehold.it/1500x1000") no-repeat;
background-size: 100% auto;
height: 1000px;
position: relative;
}
.content {
background: #f00;
padding: 10px;
position: absolute;
left: 48vw;
top: 35vw;
}
Checkout this codepen -> https://codepen.io/moorthy-g/pen/bZYyza
Using full width and full height on background images for sections of my site but I'm experiencing some jumpy behavior on Android. I'm using modernizr to detect touchevents and changing the background-attachment from fixed to local. Here is the site and below is the css that I'm using:
.intro, .behind-the-scenes, .the-scene, .the-stage, .contact {
height: 100vh;
min-width: 100%;
color: $white;
display: table;
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
// if a touchevent is detected
.touchevents {
.intro, .behind-the-scenes, .the-scene, .the-stage, .contact {
background-attachment: local;
}
}
The problem was caused by these two properties combined with the Chrome for Android browser's behavior:
CSS:
.intro,
.behind-the-scenes,
.the-scene,
.the-stage,
.contact {
height: 100vh;
background-size: cover;
}
As the user scrolls down the browser's top toolbar will disappear, thus the five elements will gain height. Because the background-size is set to cover the image will have to quickly stretch as well.
SOLUTION
I couldn't test it on a mobile device, but adding transition to the height property might solve the issue.
.intro,
.behind-the-scenes,
.the-scene,
.the-stage,
.contact {
-webkit-transition: height 0.2s linear;
transition: height 0.2s linear;
}
If it doesn't help, there's a jQuery solution which would set the height of these elements on page-load and on window resize so the background wouldn't jump every time the top toolbar disappears.
jQuery:
(function($) {
var elements = $('.full-height');
function elementHeightFix() {
var windowHeight = $(window).height();
elements.each(function() {
$(this).css('height', windowHeight);
});
}
$(window).resize(function() {
elementHeightFix();
});
elementHeightFix();
}(jQuery));
For the sake of simplicity I used a single selector, you can store the selectors in an object and iterate through them. Please note that I mainly use CoffeeScript and TypeScript, so my pure jQuery code might be messy.
my question is almost the same with this:
Hide the scrollbar but keep the ability to scroll with native feel
I loaded a list style webpage to a webview for an android app. I found that because of the scrollbar, there's a white space on the right side of the page. It's annoying. I want to hide the scrollbar, but keep the ability to scroll with native feel like #Gabriele Cirulli said.
I found this:
http://hynchrstn.wordpress.com/2012/06/10/hide-scrollbar-but-still-scrollable-using-css/
It works fine for pc, but for mobile devices, it causes the page horizontally scrollable, which is not acceptable.
Anybody can give me some advice? Many thanks.
Based on the link you added I was able to come up with a more solid solution.
HTML
<div class="container">
<div class="scroll">
[...lots of text]
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
overflow: hidden;
}
.container,
.scroll {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.container {
overflow: hidden;
}
.scroll {
padding-right: 20px;
right: -20px;
overflow-y: scroll;
}
What it does:
The .container and .scroll div both have the same dimensions as the body (full size), and since the body and .container both have overflow: hidden they will never show scrollbars in any direction.
The .scroll has an overflow-y: scroll so it can scroll vertically, but not horizontally. The scrollbar is pulled out of view with the right: -20px and I added padding of the same size so the content will always fit the screen nicely. There will be no need for the browser to let you scroll horizontally
jsFiddle
Tested on Android in Chrome and the native browser
I am using phonegap to build android app. The problem right now I am facing is that when I scroll down in listview the tabs icon's border at the bottom becomes rough and deteriorated. Could someone help me out why this is happening and how to solve it? I am adding all the images using css.
Update
Here is my code
css
footer {
position:fixed;
width: 100%;
height: 60px;
bottom:0;
left:0;
padding: 0;
line-height: 100px;
z-index:2;
background: url(../../assets/img/tabbg.png) repeat-x;
}
footer ul {
list-style-type: none;
margin: 0; padding: 0;
text-align: center;
}
footer ul li {
display: block;
float: left;
width: 33%; line-height: 50px;
margin-right: 0.5%;
height: 58px;
text-align: center;
overflow: hidden;
}
footer ul li.one {
margin-left: 0.5%;
}
footer ul li a {
display: block;
text-decoration: none;
margin: 1px;
height: 100%; width: 100%;
}
footer ul li a.home {
background: url(../../assets/img/home3.png) center no-repeat;
}
footer ul li a.profile {
background: url(../../assets/img/camera2.png) center no-repeat;
}
footer ul li a.cam {
background: url(../../assets/img/profile2.png) center no-repeat;
}
Here is my html for tabs
<footer>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</footer>
Without seeing exactly the issue you're getting it's difficult to know if it's this however I'm having problems porting an App I built for the iPhone in PhoneGap to Android (still using PhoneGap).
I'm finding that using position Fixed causes issues and I've also had problems using width:100% (trying to cater for any-width phone) as opposed to a specific pixel value. Using overflow:hidden on whole-page divs also seems to be flaky.
I was getting display issues where elements would disappear and reappear. I'm still having problems using css rotate.
Using position:absolute and setting page-size div dimensions using window.innerWidth and innerHeight seems to cure things.
A bit non-specific I'm afraid but it may help..
I'd missed off the target-densityDpi field from the viewport metatag which appears to be crucial.
Leaving it out means the phone scales down everything by a factor of 1.5 I'm confused as to why unless background graphics dimensions cause this behaviour. I noticed window.innerWidth and window.innerHeight were reporting 320*533 instead of the actual 480x800 screen size.
While it looked fine I suspect the effort of scaling everything was taking too many resources - I was getting draw timeouts in LogCat - and I guess this caused the dropouts and flicker.
The scaling is also causing the rough edges. When static the phone anti-aisled the edges but when you drag an element its edges became pixelated.