I noticed the scrolling functionality is different when using a flexbox based layout vs a position: fixed footer. The fixed footer is much smoother and shows a scrollbar. Flexbox isn't smooth at all, and does not show the scrollbar. I'd much prefer to use flexbox for my layout, but want the nicer scroll. Is there any way to achieve it with flexbox?
I'm testing on IOS 10 Iphone 7. Happens on both chrome and safari
Flexbox example
Fixed footer example
HTML:
<html>
<head>
<meta name=viewport content="width=device-width,initial-scale=1">
</head>
<body>
<div id='main'>
...lots of content so it would scroll
</div>
<nav class="footer">footer</nav>
</body>
</html>
Flexbox method:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
-webkit-flex-direction: column;
flex-direction: column;
display: flex;
}
#main {
-webkit-flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}
.footer {
height: 72px;
min-height: 72px;
background-color: blue;
}
Fixed footer method:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#main {
padding-bottom: 72px;
}
.footer {
position: fixed;
bottom: 0;
height: 72px;
min-height: 72px;
width: 100%;
background-color: blue;
}
there's nothing to do with Flexbox.it's only the problem about overflow.so add this : -webkit-overflow-scrolling: touch; will work.
Related
Below is the code that I'm using to create a footer on my website. It looks the way I'd like it to, but have to scroll down to see it on a page that doesn't have much content on it. I'd like it to be at the bottom of the screen without having to scroll down no matter what size the screen may be.
Does anyone know how I can achieve this? How can I get the footer to stay at the bottom of any screen size without have to scroll down to see it?
<html>
<body>
<br><br><footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI©</footer>
<style>
.footer{display: block;
width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 10px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
}
</style>
</body>
</html>
I'm having an issue with a fixed menu on iOS 10 Safari where the button sometimes becomes unclickable after scrolling. From debugging, the best I can tell is that the menu button's position isn't always updated properly after the scroll.
position bug screenshot
Sometimes it takes several clicks for the button to become responsive, and occasionally it forces the screen to scroll or zoom before the menu will open.
The issue only seems to be occurring on iPhone 7 using Safari, from what I've seen, but it may be present somewhere else I haven't found yet.
I've created a simplified version of the page with the issue here: http://meghandove.com/test.html
jQuery(document).ready(function() {
jQuery('a.menu-trigger').click(function(e) {
e.stopPropagation();
e.preventDefault();
if (jQuery('.menu').hasClass('menu-open')) {
jQuery('.menu').removeClass('menu-open');
jQuery('.menu').addClass('menu-close');
} else {
jQuery('.menu').removeClass('menu-close');
jQuery('.menu').addClass('menu-open');
}
});
});
body {
padding-top: 60px;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #FFFFFF;
transform: translate3d(0, 0, 0);
}
header .menu-trigger {
padding: 20px;
display: block;
text-align: center;
}
.menu ul {
height: 100%;
background: #FFFFFF;
margin: 0;
padding: 30px 0 0;
list-style: none;
position: fixed;
top: 50px;
right: 0;
}
.menu ul li,
.menu ul li a {
display: block;
}
.menu ul li {
display: none;
opacity: 0;
}
.menu.menu-open ul li {
display: list-item;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<header class="navbar">
<span>Menu</span>
<nav class="menu">
<div class="menu-ul">
<ul>
<li class="menu-item">About</li>
<li class="menu-item">Something</li>
<li class="menu-item">Something Else</li>
</ul>
</div>
</nav>
</header>
I'm trying to enclose the datagrid inside of a custom component with three stacked divs, the one in the middle acting as a growing div. The middle div grows but the grid only shows the headers, no viewport, no rows.
<!DOCTYPE html>
<dom-module id="vertical-datagrid">
<template>
<style include="bwu-datagrid-default-theme">
:host {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: lightblue;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
flex: 1;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
overflow: hidden;
word-wrap: break-word;
width: auto;
height: 100%;
/*
height: calc(100% + 15px);
height: -moz-calc(100% + 15px);
height: -webkit-calc(100% + 15px);
*/
}
#myGrid {
--bwu-datagrid: {
width: auto;
height: 100%;
opacity: 1;
transition: opacity 200ms;
background: white;
outline: 0;
border: 1px solid gray;
};
}
#gridHeaderDiv {
padding: 0;
margin: 0;
width: auto;
height: 20px;
background-color: lightgoldenrodyellow;
}
#gridDiv {
width: 100%;
test-decoration: none;
overflow: hidden;
flex: 1 1 auto;
background-color: lightsalmon;
}
#footerDiv {
background-color: lightpink;
height: 20px;
width: 100%;
}
</style>
<div id="gridHeaderDiv">
Top Header
</div>
<div id="gridDiv">
<bwu-datagrid grid id="myGrid"
theme="bwu-datagrid-default-theme">
</bwu-datagrid>
</div>
<div id="footerDiv">
Footer
</div>
</template>
</dom-module>
</html>
This is how the grid looks:
I also added this for the resize, which works great:
dom.window.onResize.listen((dom.Event e) => grid.resizeCanvas(e));
The only way I've managed to get this working is by removing the "gridDiv" nesting and simply placing the grid in between the header/footer divs.
I've seen a few posts about this but it does not seem to help with the issue I have used <meta name="viewport" content="width=device-width,initial-scale=1" /> in the head but it does not solve the problem of the header and footer not spanning the width of the viewport. The main content area seems work though.
the site to reference is brendanfenn.com
The css is as follows. Any insight is greatly appreciated.
#wrapper {
margin: 0 auto;
position: relative;
}
#header_container{
background-image: url(http://www.brendanfenn.com/wp-content/uploads/2013/02/headerBG1.jpg);
width: 100%;
}
#header {
width:964px;
height:150px;
margin: 0 auto;
}
#content {
width:964px;
background: url(images/border-bg.gif) repeat-y top left;
z-index: 1;
margin: 0 auto;
}
#content #left-col {
width:615px;
float:left;
padding: 20px 11px 20px 10px;
z-index: 1;
}
#content #right-col {
width:307px;
padding:3px;
float:left;
z-index: 1;
}
#footer {
width:100%;
background: #2a2006;
margin: 30px 0 auto;
}
Try setting the width and height values for your body element
body { width: 100%; min-height: 100% }
Another option that may help address the issue is using the #media type, which you can use to specify css values for when a device is in landscape mode.
#media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
body { //values here }
}
<meta name="viewport" content="width=device-width,initial-scale=0.4">
(From the linked file)
is your problem. This is setting your viewport to 800px wide (device-width * 1/0.4).
'width:100%' refers to 100% width of the viewport, i.e. 800px, so everything is working as it should.
I have done some absolute positioning with css. But in the following case, why in the firstBox , the top and left values are ignored? (I want top at 100 px and left at 100px). The Second box is pisitioned correctly.
<html>
<head>
<title>Testing</title>
<style type="text/css">
#firstBox {
color: white;
width: 500px;
padding: 1em;
background: red;
position::absolute;
top:100px;
left:100px;
z-index:2;
}
#secondBox {
color: white;
width: 500px;
padding: 1em;
background: blue;
position: absolute;
top: 100px;
left: 100px;
z-index: 0;
}
</style>
</head>
<body>
<div id="firstBox"> The First Box! </div>
<div id="secondBox"> The Second Box! </div>
</body>
</html>
It is because you are using 2 colons for position: absolute; for #firstBox
My Fiddle