I have a local page in android webview, pages's html and body both has width:100%;height:100%;overflow:hidden; , and the #result-popup-wrap has the following css:
#result-popup-wrap {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 245px;
background: #fbfbfb;
border-top: 1px solid #dcd9d5;
-webkit-transform: translateY(100%);
}
but, as you see, when I scroll to bottom of the page, I can see the #result-popup-wrap, which should not be visible.
Any help is appreciated!
Just for anyone who are suffering the same problem.
ADD position:relative to the <body> tag.
Apparently, this is a bug of WebView, on both Android and iOS. On chrome of PC version, page renders OK without body{position:relative;}, but in WebView, you can scroll the entire page, including the 'hidden' #result-popup-wrap.
click here to see demo , pay attention to the UPPER comment in css
you can set body{position:fixed;top:0} to the body.
Related
So here is the problem I am facing: the website layout in my phone doesnt look the same as I saw on the browser with responsive viewport turned on.
I was looking at the similar questions posted on this forum like this (meta tag problem)
I am self-learning web development and working on a simple website of the game "paper, scissors, rock".
I draw the framework with HTML.
The paper, scissors and rock logos are svg injected by javascript so I can fill it with different color.
The svg styles are done in css.
The combat part would be done in javascript but now I am confused by the layout problem.
So what I expected from desktop(windows) google chrome is like this:
chrome app view
my firend's Android phone google chrome view:
android app view
but what I get from my iphone google chrome:
iphone app view
I think the css and javascript thing would not be a critical point because it works fine on desktop and android phone.
I think it would be a tag problem but I am not able to find answers others mentioned before.
I dont know if it is the difference between ios and android.
I have faced similar issues before. I had tried to create a circle button with purely css (not img or svg). It shows perfectly in desktop web browser and my friend's android phone. But it shows a ellipse on my iphone.
Here is the code I used to create the button:
HTML:
<button id="master-button" type="button" onclick="AddContent(this)">
<div class="button-cross"></div>
<div class="button-cross rotate"></div>
</button>
CSS:
#master-button{
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--white);
border: none;
font-size: 50px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.button-cross{
position: absolute;
top : 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 5px;
height: 30px;
background-color: var(--high-light-main);
}
.rotate{
transform: translate(-50%,-50%) rotate(90deg);
}
Iphone view:
iphone app view
Android:
android app view
Desktop:
desktop app view
I thought it was caused by the different programming language by android and ios. So I thought it will only shows error if I use Safari. But it turns out even I use the same browser (google chrome), it still shows difference on the screen.
Do you guys have any thought about the issue? Do any of you have faced this issue and finally have a solution on it?
Please let me know and discuss more about it. Thank you for the community.
Using Bootstrap 4.3.1
On my site, modals work perfectly, in responsive mode too.
I also have an Android app, that among other functions, contains my site in WebView. When I trigger a modal within WebView in the App, on a long page - it opens at the top of the page (not vertically centered) and if you happen to be half scrolled down the page, you will not see it, as the position is fixed to the top, and you now need to scroll UP to see it (if you even know it opened).
Again, in a log web-page, in mobile form - the issue does not exist - only in WebView.
Has anyone run into this?
This is Bootstrap's position for the modal.
.modal {
position: fixed;
top: 0;
right: 0;
z-index: 1050;
display: none;
width: 100%;
height: 100%;
overflow: hidden;
outline: 0;
}
It seems that in WebView, the position: fixed; is ignored - as it's relative to the window, so if it scrolls down, the modals goes up with the page.
Tests for this are tricky, as to test properly, you need to test within an app, within a WebView Container (as I mentioned, in Chrome responsive on mobile, this issue does not exist).
Check this below styles are overwriting from some other styles,
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
looks like a style rendering issue,
I hope it will work for you.
Put it in html javascript tag.
$('#here_put_modal_id').on('shown.bs.modal', function (e) {
// here are code
document.documentElement.scrollTop = 0
})
I want to post an update and close this question with an update for anyone who runs into this issue in the future.
It turned out that there was a bug in the app, and the "pull to refresh" module was interfering with the location of the popups. As soon as that was fixed, the modal opened in its correct position, based on the bootstrap existing code.
Thanks to all those who tried to help.
.edit-wrap
z-index 999
position fixed
left 0
right 0
top 0
bottom 0
overflow hidden
background rgba(0, 0, 0, 0.6)
display flex
.edit-container
background #d1cdb7
padding 1em 2em 1em 2em
margin auto
This stylus demo works on my webview
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
Any ideas how to remove the gap (on the screen) whitch appears during scrolling?
Header has position fixed and the gap appears only on Androd (tested on Android 4.0.4).
Part of the code responsible for the header:
HTML:
<div data-role="page" id="settings">
<div class="holo-action-bar">
<h1><span>Settings</span></h1>
</div>
<div class="content content-inner"></div>
</div>
CSS:
.holo-action-bar {
background-color: #333;
color: #fff;
display: block;
position: fixed;
top: 0; right: 0; left: 0;
width: 100%;
z-index: 1000;
}
Also you can see example at jquery mobile docs
UPDATE:
The problem doesn't occur on iOS (tested on iOS 5+)
I found the solution :
this is CSS problem on phonegap.
body {
<< height : 100%; don't use it >>
width: 100%;
margin:0;
padding:0;
top: -1px;
}
HardwareAccelaration : true
But delete your data-position="fixed"
make a class
<div id="header"><h1>Fixed header!</h1></div>
css:
#header{
position:fixed;
top:0;
}
EDIT *
Have you tried to check the margin on your inner object?
if its a p tag or h1 or so they have standard margin
if i check out the link you gave btw i dont like jquery mobile cause it gives more problems than it helps tbh.. but anyhow
it seems that it have a border on 1px or so do you have a link to your site?
I had the same issue and I solved it accidentally when I added this line in my activity.java:
mWebView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
and android:hardwareAccelerated="true" in the manifest under the <application> tag. This tries to disable the software renderer in favor of the hardware one, and it worked on my 4.0.1 device.
If you are using webview with the fixed header and footer, you also might want to add the following too so the flashing animation over the header/footer disappears:
mWebView.setOverScrollMode(View.OVER_SCROLL_NEVER);
I have got the 1px gap above the fixed header in an Android 4 pad, when using Intel App Framework 2 with Cordova 3.0.0. With the target Android version set to 4.3.
The problem was not there when I set the target Android version to 2.3.3 in previous projects.
At the end I found that when I set hardwareAccelerated="false" (in two places) in AndroidManifest.xml, the 1 px gap is gone.
when I build bottom toolbar in HTML I use the following code:
.bottomMenu
{
position: fixed;
bottom: 0px;
width: 100%;
}
.bottomMenu div
{
text-align: center;
white-space:nowrap;
}
the problem is that it work just fine in ordinary browser but it does'nt work in mobile browser such as iphone or android.
how to solve this problem?
thanks in advance.
Kobi
The problem is fixed positioning, which isn't really supported by iOS<5 and Android<3: http://caniuse.com/#search=fixed
Search for 'position fixed iOS' or something like that for lot's of alternative solutions :)