i just finished developing my iOS Application with Cordova. So now i want to do the same on Android. Everything works fine but: You cant Overscroll the content. I have a fixed header/footer, then a Picture and then some navigation points.
On iOS you can Scroll the Content so that you can see the clients logo in the background. On Android this doesn't work, you can not overscroll the content to see the logo.
I read that -webkit-overflow-scrolling: touch and overflow: scroll doesn't work on Android. But those questions were from 2011. Is it still not possible to make the content overscrollable on Android?
Thank you!!
.ScrollableWrapper {
overflow: scroll;
-webkit-overflow-scrolling: touch; /*to make it smooth as native*/
background:url(../img/start/bg_wrapper.jpg)no-repeat scroll 0 0 / 320px 480px rgba(0, 0, 0, 0);
top: 45px;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
position: fixed;
}
#header {
padding-top: 0px;
margin: 0px;
position: fixed;
top: 0px;
left: 0px;
width: 320px;
z-index: 2;
max-height: 45px !important;
height: 45px !important;
}
#foooter {
position: fixed;
bottom: 0px;
z-index: 2000;
width: 100%;
height: 58px;
}
Maybe you can have a look at iScroll.
Related
On desktop it works but on Android as if taking the position: absolute or nothing or I don't know.
This is my code:
#only_900{
display: block !important;
position: fixed;
bottom: 73px !important;
z-index: 999;
width: 100%;
left: 0;
--backface-visibility: hidden !important;
--webkit-transform: translateZ(0);
}
#grid1wrap{
--webkit-backface-visibility: hidden !important;
--backface-visibility: hidden !important;
display: block !important;
position: fixed;
bottom: 73px !important;
z-index: 999;
width: 100%;
left: 0;
--webkit-transform: translateZ(0);
}
I'm pretty sure that this problem is because of the way the various browsers interpret the code. I think that new browsers only make the html as big as the content inside, therefor the HTML and body are not reaching the bottom. Try adding the following CSS code.
html,
body {
height: 100%;
}
I'm having some troubles displaying my first websites on mobiles devices. When the device is vertical, the website background image does not fit the entire screen i've tried with the background-size: 100% 100% rule but does not work either. This is my css right now:
background-attachment: scroll;
background-image: url("http://qubik-design.co.nf/wp-content/uploads/2015/07/rsz_intro-bg4.jpg");
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;
The last trouble is the footer. It does not stick to the bottom of the screen even on some PC. This is the css:
<footer id="colophon" class="site-footer" role="contentinfo">
#colophon {
background: #000 none repeat scroll 0 0;
color: #ffffff;
opacity: 0.8;
padding: 20px;
}
I tried with bottom:0px but does not work and this is all.
Thanks in advance.
To make your background image fill the entire screen you can use background-size: cover. You will also need to make the body 100% height.
body.custom-background {
background-image: url('http://qubik-design.co.nf/wp-content/uploads/2015/07/rsz_intro-bg4.jpg');
background-size: cover;
height: 100vh;
}
It, however, will not look right with the current background image. You might want to make this 2 images instead.
For the footer, assuming it is only for this site and you will not change the height, or you can change the CSS accordingly, you could make the page id 100% of the screen height and add a bottom padding that is at least as high as the footer.
#page {
position: relative;
z-index: 999;
margin: auto;
min-height: 100vh;
padding-bottom: 250px;
}
Then you can give the colofon an absolute positioning.
#colophon {
background: #000;
opacity: 0.8;
color: #ffffff;
padding: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
The task is to display block at center horizontally and vertically inside other block. I use this code
<div class="parent">
<div class="child"></div>
</div>
.parent {
background-color: #AFAFAF;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.child {
background-color: #FF0000;
bottom: 0;
height: 200px;
left: 0;
margin: auto;
position: fixed;
right: 0;
top: 0;
width: 200px;
}
and it works great on browsers and iOS devices, but this is the case in mobile android devices (not tablet): the inner div gets pinned to the top left corner, but when I inspect element using Adobe Edge Inspect I see that highlighted area for this inner div is displayed correctly. How can I fix this issue with centering on Android mobile? The size of inner block will change so the desigion should be universal.
I used to align div horizontally and verticaly the way you're doing but it seems like this technique is not really cross browser. Instead I took a look at the way Facebook was doing.
The demo on JsFiddle
The HTML :
<table>
<tr>
<td><div class="square">Some text</div></td>
</tr>
</table>
The CSS :
html, body {
height: 100%;
width: 100%;
}
table {
margin: 0px auto;
height: 100%;
}
.square {
width: 150px;
height: 150px;
background-color: red;
}
NOTE : I recently took a look and it seems like Facebook changed the way they do it. They are still using table display properties but no more the table, tr and td tag (div instead).
The easiest way with your markup is {left:50%;margin-left:-100px;}.
Then the same with height. {top:50%;margin-top:-100px;}
In summary:
.child {
background-color: #FF0000;
height: 200px;
left: 50%;
position: fixed;
top: 50%;
width: 200px;
margin: -100px 0 0 -100px;
}
I have created a website for a client that works on all web browsers as I intended except for Android. For reasons unknown the Android browser resizes my Menu bar as well as the part depending which phone it is running on.
If you would like to see the code please go to this link
This is a screen shot from the Galaxy Nexus
screen shot from Galaxy Nexus
As you can see the text has been pushed into a tall thin column. I have no idea why it is doing this.
Any help would be much appreciated.
Delete everything in the #AboutUs From the #AboutUs in Style.Css line 445.
Before
#AboutUs
{
height: 655px;
}
After
#AboutUs
{
}
As for the footer, remove the width from its css (#legal) (Line 693 in Style.CSS)
Before
#legal
{
position: relative;
font-size: 10px;
margin: 0px auto;
width: 130px;
padding: 0px;
line-height: 1.1em;
text-align: center;
color: #606060;
top: 5px;
}
After
#legal
{
position: relative;
font-size: 10px;
margin: 0px auto;
padding: 0px;
line-height: 1.1em;
text-align: center;
color: #606060;
top: 5px;
}
I'm using the new panel widget from jQuery mobile. But i think it has a bug. I can't scroll inside the panel if its content is bigger then the actual "content".
To see what I mean, please check out this on an Android device and try to scroll inside the panel.
you can add two attributes in css to fix the scroll
height: 100%;
overflow-y: scroll;
<div data-role="panel" id="mypanel" style=" height: 100%; overflow-y: scroll;">
I hope this work in Android, Please try.
Problem is fixed with jquery-mobile 1.3 RC1.
Try to clear ui-panel-inner and add overflow: scroll to ui-panel
.ui-panel {
width: 17em;
min-height: 100%;
border-width: 0;
position: absolute !important;
overflow: scroll !important;
top: 0;
display: block;
padding: 0 !important;
margin: 0 !important;
}
.ui-panel-inner:after {
content: '.';
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
display: block;
}