I have a popup that appears when the user clicks on a marker on the map (I'm using Google Maps JavaScript API).
HTML:
<div id="map"></div>
<div id="popup" class="popup-bubble-content">
... content inside
</div>
CSS:
.popup-bubble-content {
z-index: 1000000;
position: absolute;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
JavaScript:
var popupList = document.getElementById('popup');
... some processing code
popup = new Popup(latLng, popupList);
popup.setMap(map);
On mobile, you can click the content inside the popup, but you can't touch scroll. Scrolling works fine on PCs with a trackpad or mouse, but touch scroll is not working.
I have tried...
Setting a height on the div
Setting z-index to a high number
Setting overflow-y to scroll/auto;
Adding -webkit-overflow-scrolling: touch;
Setting position: fixed
None of these have worked for me.
Here is a picture of what the popup looks like. The scroll bar is visible, but touch scroll is not working.
EDIT:
I made a slight discovery. If I append the popup to say, the body element after it is created, it works fine, but it is not positioned correctly. The touch scroll problem was caused by popup.setMap(map), after which the popup became a MVCObject and became the child of some random element created by the Google Maps API.
I'm pretty sure this is a bug, or at least an unintended feature. I am submitting a bug report.
I'm sure I've seen this before when embedding a forum, I would try changing overflow-y: auto; to overflow-y: touch; and make sure that you choose a content width and height and repeat them throughout.
Related
I am using this popup modal from https://www.w3schools.com/bootstrap/bootstrap_modal.asp, and it works pretty well, the issue is that when the popup appears, the back screen is still scrollable, which i can not figure out how to resolve
When the modal is open you can set some CSS class for your html and body elements. For example: .modal-open.
.modal-open {
overflow: hidden;
}
More here: https://stackoverflow.com/a/53932629/8890700
I'm pretty new to angular and webdev as a whole and I'm kind of stuck right now. I'm currently trying to do some custom logic with scrolling as I need to move some absolutely positioned elements relative to an overflow's scrollbar.
I have a div:
<div id="tableWrapper" class="search-table-outter" (scroll)="onScroll($event)">
...
</div>
Formatted with CSS that creates the overflow:
.search-table-outter { overflow-x: auto; margin-bottom: 50px; }
and in typescript:
onScroll(event) { console.log("SCROLLING"); }
When I load up my page and attempt to scroll in that overflow, the event is successfully captured and "SCROLLING" appears in console as expected, however, the overflow no longer scrolls. I'm assuming this is expected behavior however I want the overflow to still scroll while modifying the properties of the other elements. Is there something basic that I'm missing?
How can I capture the event and do what I want while still having the overflow scroll?
Thanks!
On iOS, as you scroll on Google's I/O Event page, the height of Safari's address bar does not get reduced. However, if you scroll on ANY other website, Safari's address bar shrinks.
How is this achievable? I've been trying to look through their CSS code. I think they're using Polymer for their site.
Scrolled to the bottom of the page in both screenshots, see the height difference in Safari's address bar.
I don't have an iphone at hand to test it but I think this is because they have
<core-draw-panel> set to overflow: hidden;
and child element
<div main> set to overflow-y: scroll;
I think this prevents url bar hiding on scroll.
I have a menu that's within a div that I hide off screen. When the menu-button is pressed I bring the menu in to view. Whilst doing this, I shift the visible content of the body over to one side, allowing room for the menu.
When I originally did this, I placed overflow-x:hidden; in the body and it worked perfectly for desktops. When I loaded the website on to my phone, I noticed that the phone didn't behave the same - it attempt to display the menu and all of the content that was on the screen.
I did a little reading and it stated that mobile browsers ignore overflow-x when placed in the html or body tags and a wrapper div should be created.
When i made this edit my menu vanished. When I click the menu-button, the content moves across for the menu but it doesn't appear.
What is going on here? I don't quite understand why the menu would disappear. How can I fix this?
The wrapper that I made is....
#body_wrapper{
overflow-x: hidden;
}
<div id="body_wrapper">
My nav bar...
My menu...
my content...
</div>
My website is - http://robingham.co.uk/LUUCC6/index.php
This current edit of the website has the overflow-x:hidden; set in the body of the CSS, not the body_wrapper. So the menu displays but it doesn't properly function on a mobile.
So i fixed my issue! Whoop!
Originally i was using .animate() in Jquery for my menu animation. The menu would hide offscreen and using the animate function i would 'slowly'(285px in 0.3s) move the menu in to place on screen. Whilst this worked perfectly fine for desktop browsers where i placed overflow-x: hidden; in to the CSS for the body. Mobile browsers ignore overflow-x: hidden; when placed in the body.
Reading around i saw many times about placing overflow-x: hidden; in to a wrapper for the body content. Ie. content . Whilst it indeed stop a scroll bar popping up for the x-axis and content being shrunk, it screwed up my menu - my menu just vanished. For whatever reason putting overflow-z: hidden; in to the wrapper didn't agree with the Jquery animate function. I tried placing the menu outside of the wrapper but still no luck. I also tried playing overflow-x: hidden; in to both the wrapper and the body with no success.
Okay so time for a new strategy, as i spent far too long playing with my menu to just scrap it.
My solution
I currently have my menu sat outside of the wrapper and so i've decided to keep overflow-x: hidden; in both the body and the wrapper. Maybe an overkill but at least i know it'll function as intended regardless of the browser. Maybe in the future, i'll have a little faff with putting the menu back within the wrapper and only have the overflow-x: hidden; in the wrapper and see if it still works. (I kind of don't like having many things that do the same/similar job scattered everywhere. It feels a little messy.)
The menu has three associated classes attached to it now. menu, menu_hide, and menu_show. menu has all of my CSS formatting. I use the menu_hideand menu_show classes to hide and show the menu.
My default HTML for the menu looks like this. Note that it has two classes.
<div class="menu menu_hide">
My CSS for the hide and show look like this. Note that transition does the same job as the Jquery .animate() function.
.menu_show{
transition: 0.3s;
left: 0px;
}
.menu_hide{
transition: 0.3s;
left: -285px;
}
My JS looks like this. Note that i toggle between the menu showing and hiding classes everytime i hit the menu button.
$('.icon-menu').click(function() {
$('.menu').toggleClass( "menu_show menu_hide" );
});
When a user perform a search on my website I want to show the result in a small div with vertical scrollbars instead of that the user need to scroll the full page. That works perfect in all browsers BUT I get problems on the iPad. I can see that the search result doesn't fit into the div but no scroll bar is showing up on the iPad. Also when I try to scroll inside the div the full page is scrolled instead. Is there a solution to get this working?
HTML AND CSS:
<div class="searchResult">
//Here I show the search result
</div>
div.searchResult
{
height: 540px;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
I believe the answer is that you cannot scroll unless you use the two-finger methods. However if you look at the last link, there is a workaround.
Issues:
CSS Overflow property not working in iPad
http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html
Workaround:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
iScroll is the jQuery plugin that tahdhaze09 mentioned. And to be more specific:
iScroll is evolving and adding many new features to the basic
scrolling functionality. If all you need is the plain old scroller for
mobile webkit, you should really use iscroll-lite.js instead.
iscroll-lite.js is part of the iScroll package. It looks as if it will solve the one-finger scroll problem quite nicely.
For some odd reason changing the div to a span works on an iPad.