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.
Related
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
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 have my website and it looks great everywhere however I'm not a professional coder for Android. I do not know the extra quirks it has and I'm not sure hoe much I really need to know. Is there a way to single it out like in conditional comments for IE?
Here is my website and the banner and logo appear off to the left hand side of the screen. I have a Samsung Galaxy 3 and this is what my banner looks like on it.
Now I realize why this is happening, it's because they are both absolutely positioned and obviously the margin-left is making it go off screen. However I can't change that without destroying the layout for all the regular desktop browsers.
#site-title { background: url(img/heavensgate-logo.jpg) no-repeat; width: 229px;height: 297px; position: absolute; top: 0px; left: 50%; margin-left: -438px; z-index: 2; border: 0px; text-indent: -9999px; }
#banner { position: absolute; top: 165px; width:868px; left: 50%; margin-left: -448px; z-index: 1; padding: 15px; background-color:
#fff; border: 1px solid #b4b4b4; }
<h1 id="site-title"><span>Heavens Gate Winery</span></h1>
<div id="banner">
<img src="http://heavensgatewinery.ca/wp-content/uploads/banner8.jpg" style="position: absolute; visibility: hidden; top: 0px; left: 0px; border: 0px none;">
</div>
I'm confused as to how I should work with getting the banner and logo to work with Android. Any help is appreciated.
When you need to position elements with absolute positioning you should almost always do so inside a relative positioned element.
<div style="position:relative;"><div style="position:absolute;"></div></div>
Although this is not the problem described there, the Android browser has another issue regarding absolute positioning; absolutely positioned DIVs disappear. The solution Paweł Komarnicki found is -webkit-backface-visibility: hidden:
<div style="position: relative">
<div style="position: absolute; -webkit-backface-visibility: hidden">
</div>
</div>
My problem is in my Android (Samsung) that unless the other answers, left: in px gives the right position (absolute) but left: in % goes to position 0. Even e.g.
left: 10px;
left: 20%;
goes to position 0, calc() does not work either in left:, but works in width in a limited way.
So I think % does not work for left: in an Android. So I thought in the above problem left:50% was the problem, I am wondering it was solved with position relative / absolute. I did the same but no solution! No difference either when using -webkit-backface-visibility!
The solution: in stead of left: 17%, use left: calc(17%) and the other fixed px for left: are taken, but % does not work!!!
I did some testing that I suppose is relevant to this question. I wanted to center a SVG element inside a div.The code was not rendered correctly in Android 4.2.2. Now when I change translate to translate3d the problem is fixed. I've a made a piece of code that you can see both translate and translate3d side-by-side. My Android browser only renders the translate3d version correctly; possibly because of forced hardware acceleration. Note that I used a tiny Javascript code to copy the svg from one div to another. Here's the code snippet and the codepen:
Codepen: https://codepen.io/ehsabd/pen/yxOPOe
document.getElementById('test-translate3d').innerHTML = document.getElementById('test-translate').innerHTML;
#test-translate, #test-translate3d{
background: lightgray;
margin:20px;
float: left;
position:relative;
padding:100px;
}
#test-translate svg, #test-translate3d svg{
position:absolute;
width:100px;
left: 50%;
top: 50%;
}
#test-translate svg{
-webkit-transform: translate(-50%,-50%);
}
#test-translate3d svg{
-webkit-transform: translate3d(-50%,-50%,0);
}
<!--I've tested this on Android 4.2.2 native browser and I've seen that the first heart from left (which uses translate is not centered but the second heart (translate3d) is appropriately centered)-->
<div id="test-translate">
<svg
id="svg19871"
sodipodi:docname="remigho_like(paths).svg"
viewBox="0 0 604.96 556.17"
version="1.1"
inkscape:version="0.48.5 r10040"
>
<g
id="layer1"
inkscape:label="Calque 1"
inkscape:groupmode="layer"
transform="translate(-69.568 -427.74)"
>
<path
id="path18741"
sodipodi:nodetypes="csscssccc"
style="color:#000000;stroke:#000000;stroke-width:53.15;fill:none"
inkscape:connector-curvature="0"
d="m586.75 734.03c37.196-28.491 61.2-73.36 61.2-123.83 0-86.088-69.799-155.89-155.89-155.89-48.272 0-91.426 21.952-120.02 56.407-28.592-34.455-71.746-56.407-120.02-56.407-86.088 0-155.89 69.799-155.89 155.89 0 50.469 24.003 95.338 61.2 123.83l214.72 223.3z"
/>
</g>
</svg>
</div>
<div id="test-translate3d"></div>
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/
i added a div with a lot of data in it, and it works fine on a PC and on the Blackberry, but it doesn't work on Android: The data is retrieved with no problems but the div isn't scrollable.
Here is the HTML code:
<div id="scroll">
<div runat="server" ID="view"></div>
</div>
And the CSS:
#view
{
position: absolute;
top: 15%;
left: 0.9%;
width: 98.3%;
height: 75%;
font-family: Calibri;
font-size: 0.5em;
white-space: pre-wrap;
border: 1px solid black;
overflow: auto;
padding: 0.2em;
}
What is the problem?
If you're trying to do this on a native android application, you're going to have to implement a ScrollView:
http://developer.android.com/reference/android/widget/ScrollView.html
I found a creative work-around (that works on Android (2.3.5 Gingerbread) and Firefox browser for Android).
I didn't have the problem reported here on the first site I did but had issues on the second. After finding this answers here I remembered the old site worked so I checked what I did there. Copying over old to new site I was able to fix my problem...
This works on Android/Firefox browser but does not put a scroll bar indicator on screen (but touch-drag scrolls the content down the .
What WORKED for me is dual Tags... EMBED code to scroll in a second tag.
<div style="width: 100%; height: 100%; background-color:#fdc4f6; border: solid 1px #000;">
<div style="overflow:scroll; height:350px; text-align:left; padding: 1em 4em 0 4em;"> [Content will scroll if text overflows div on Android now]
then close DIV tags now the content in the second
may not be the prettiest code or method to use, but it got the job done for me (although I haven't tested in iOS devices).
For what it's worth...
-LB-
<div style="width: 100%; height: 100%; background-color:#fdc4f6; border: solid 1px #000;"><div style="overflow:scroll; height:350px; text-align:left; padding: 1em 4em 0 4em;"> [Content will scroll if text overflows div on Android now]</div></div>