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
Related
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
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
So I'm still new to the whole css and div thing, pardon my bad coding. :/ Anyways, I have finished a site but oddly the side navbar does not appear on mobile browsers such as Chrome and the default android one. Any ideas as to why? All help is appreciated.
http://escobarboxing.com/
Also, I've tested it on my Desktop via Chrome, FF, and Opera and it appears to be working fine but another user using Chrome said he did not see it?
Yep, that's because of this: #menu{position: absolute;}
Because the position is absolute, and the main content is centered, when you get to a small screen size, the menu goes behind the content. You can experiment with this just by resizing your screen really narrow.
For a quick fix, remove the position: absolute, which will fix your problem, but here's what I recommend:
Remove position absolute and relative from #menu and #container. Remove Margin right and left: auto from #container, then float #container left (float:left;). Finally, apply the auto left and right margins to #site (you'll need to specify a width first, looks like 920px should work). The #menu will stay next to the #container, and both will be centered with regards to the page.
For good measure, I'd add a 100% height and width div (#wrapper) above site.
Also, side note, if you put "position: absolute;" on anything, it's removed from the 'flow' of elements, so margins won't affect it. Here's a great article that helped me figure out position: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Welcome to CSS! It's fun, and sometimes aggravating. I hope you enjoy.
Try using %'s instead of fixed widths. What's happening is on smaller screens the menu is covered by your content block because the block is to big for the screen. To see what I mean open the site with your smartphone then adjust the size of your container down. You will see your menu appear when you refresh. I have firefox on this laptop and the menu doesn't show for me either.
You should try adding the menu div to container and remove position absolute.I see too many divs so try using less divs. why do you need that cssmenu div?
<div id="container">
<div id="menu">
<div id="cssmenu">
</div>
</div>
<div class="insta">
</div>
rest of content
</div> end container
.insta {
color: #333333;
width: 100%;
margin-left: auto;
margin-right: auto;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 0 0 10px 0 #000;
-webkit-box-shadow: 0 0 10px 0 #000;
box-shadow: 0 0 10px 0 #000;
background: #EDEDED;
float:right;
width:770px;
}
#container {
overflow: auto;
height: auto;
width:920px;
margin:0 auto;
}
#menu {
float: left;
margin-top: 25px;
}
Hope this answer helps.
I'm working on a project for a client and ran into an issue when testing the website on my Android device. Basically, I just want to center a DIV which wraps around most of the body content.
<img src="images/lightingOverlay.png" style="z-index: 1000; position: absolute; left: 0; right: 0; margin: 0 auto; top: 0;" />
<div style="border: solid 5px black; height: 50px; width: 978px; position: absolute; left: 0; right: 0; margin: 0 auto; top: 100px;" >
wrapped content!
</div>
I used inline styles for now. Even though the div and the image are using identical code, when viewing on the default Android browser, the image gets centered and the DIV doesn't.
I tried using a left: 50% positioning with negative margin equal to half the elements width as well, but that doesn't seem to work either.
Anyway, I've basically been playing with the code and testing it in Chrome v21 and Android for the last 2 days trying to figure out what the problems...and as you can see in the example, I've stripped down to the simplest elements without any luck. Anyone have any idea how I can get the horizontal centering to work in Android?
If you remove the position absolute, left, top & right bits of code you should be fine.
The DIV should only need margin:0 auto in order to be centered.
I would suggest not to use absolute in this instance and rather use margin-left:auto; and margin-right:auto;
<div style="border:solid 5px black; height:50px; width:978px; margin-left:auto; margin-right:auto; margin-top:100px;" >
wrapped content!
</div>
EDIT:
you can also try this implementation
<div style="width:100%; text-align:center;">
<div style="border:solid 5px black; height:50px; width:978px; margin-top:100px;" >
wrapped content!
</div>
</div>
>
Alright, centering works now after using
style="width: 1200px; position: absolute; left: 0; right: 0; margin: 0 auto; top: 0;"
The 1200px width here is the width of the large image overlay I'm using on the page, which also happens to the widest object on the page. It seems like the mobile browser takes the width of the widest element on the screen, and scales it so that this width is equal to the screen width. Then it does the rest of the rendering. If the screen is re-sized after that, apparently it doesn't bother re-positioning things?
Okay, so I'm not sure why this worked...just that it did. Hopefully it can help someone else who runs into the same problem.
I am developing an HTML5 web application for mobile devices and ran into a bit of trouble with smooth animations.
Essentially, when a user taps a button, a drawer (a div with height: 0px) should animate to a given height (in pixels) and content will be appended to that drawer. If you have a Pinterest account, you can see the animation as it is now, at http://m.pinterest.com (tap the Comment or Repin button).
The unfortunate problem is that on mobile devices, Webkit Transitions aren't hardware-accelerated the height property, so its extremely laggy and the animation is jagged.
Here are some code snippets:
HTML:
...
<div class="pin">
<a class="comment_btn mbtn" href="#" title="" ontouchstart="">Comment</a>
<div class="comment_wrapper">
<div class="divider bottom_shadow"></div>
<div class="comment">
<!-- Content appended here -->
</div>
<div class="divider top_shadow" style="margin-top: 0"></div>
</div>
</div>
<div class="pin"> ... </div>
CSS:
.comment_wrapper {
-webkit-transition: all 0.4s ease-in-out, height 0.4s ease-in-out;
position: relative;
overflow: hidden;
width: 100%;
float: left;
height: 0;
}
.comment {
background: #f4eeee;
margin-left: -10px;
padding: 10px;
height: 100%;
width: 100%;
float: left;
}
Javascript (using jQuery):
function showSheet(button, wrapper, height) {
// Animate the wrapper in.
var css = wrapper.css({
'height': height + 'px',
'overflow': 'visible',
'margin-bottom': '20px',
'margin-top': '10px'
});
button.addClass('pressed');
}
$('.comment_btn').click(function() {
showSheet($(this), $(this).siblings('.comment_wrapper'), 150);
});
Screenshots : http://imgur.com/nGcnS,btP3W
Here are the problems I encountered with Webkit Transforms that I can't quite figure out:
Webkit Transforms scale the children of the container, which is undesirable for what I'm trying to do. -webkit-transform: none applied to the children don't seem to reset this behavior.
Webkit Transforms don't move sibling elements. So, the .pin container after the one we're operating on doesn't move down automatically. This can be fixed manually, but it is a hassle.
Thanks a lot!
With mobile phones being so fast it's easy to forget they are actually pretty humble devices when you compare them to desktop hardware. The reason why your page is slow it because of rendering reflows:
http://code.google.com/speed/articles/reflow.html
When the div grows, it has to push and recalculate the positions of all the elements, which is expensive to a mobile device.
I know it's a compromise, but the only way you can make the animation smoother is by putting position: absolute on .comment_wrapper; or if you really want butter smooth animation, make it pop up from under the screen with css transforms, i.e.
.comment_wrapper {
height: 200px;
position: absolute;
width: 100%;
bottom: 0;
-webkit-transform: translate(0, 100%);
}
var css = wrapper.css({
'-webkit-transform': 'translate(0, 100%)'
});
You want traslate3d. Should use the GPU if the device supports it.
check this out...
http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/