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
Related
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.
I'm building a website that has custom scrolling, and as such, I would like to hide default scroll bars. I'm using the following CSS to accomplish this:
html, body {
overflow: hidden;
}
This seems to work, but the problem I'm having is that scrollbars flash and then disappear whenever the page loads. This appears to happen in all browsers on Windows. Any idea as to why this might be?
Angular is also being used in the project.
I found the answer to the problem:
I had a transition wrapper that Angular was injecting. This transition wrapper had a default overflow value, and thus would show scrollbars. Scrollbars flashed because the transition only played for .5s, and then would leave the DOM. Adding the following line to my code made it work:
[ui-view].wrapper {
&.ng-enter,
&.ng-leave {
overflow: hidden;
}
}
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" );
});
Days ago I made a simple splash screen that is currently fixed and sets a cookie when the user clicks the button (to never appear again).
Basically, It is just a div that appears in front of the main content of the page.
My problem is that even though the splash screen uses all the width and height, the scrollbar keeps appearing. I did not care about this at the first time, as it was position:fixed'd and the content was always there, impossible to move with scroll up or down.
Today I saw that on mobiles, when you scroll, sometimes you can see the content behind the splash screen.
So the main problem is the scroll bar. Therefore I decided to hide the scroll bar at all costs.
But overflow:hidden does not work.
It does not work also if I put position: relative to the parent of the splash.
How can I disable the scroll? Is there anyway I can do it with CSS? Should I use javascript to solve the problem?
Here is a fiddle of my splash and my home page:
http://jsfiddle.net/tomas2387/G8M4D/
As you can see, the splash screen is in front, but the scrolling is there, even though I use overflow:hidden.
Thanks
Adding:
html,body{
overflow:hidden;
}
Works for me
Alternatively- depending what you're specifically after, you may want to add:
html,body{
padding:0;
margin:0;
}
Then wrap everything after the modal--mobile-splashpage part within another element and hide this when the splash is being shown. You can then toggle the two (splash and content) as you see fit. See demo here
html,body{
overflow:hidden;
}
And when you hide splash screen just use jquery to get back scroll
$('html,body').css('overflow','auto');
Try this one:
body {
overflow-y: scroll;
position: fixed;
width: 100%;
}
i was just playing with the navbar of bootstrap and got into this design issue that bootstrap already seems to have. Just go to this example page that the site has: http://getbootstrap.com/examples/navbar-static-top/. Now resize the window to a smaller width till you get the navbar collapsed and click on the right icon where it shows the navbar elements in vertical fashion. Now click on the 'dowpdown' link so that it shows a dropdown. leave it as it is , dont click it again and resize the browser window to the previous full width. you might see the issue where the dropdown is below the content and is inside a overflow: auto type box. any answers how this can be solved?
I resolved this issue by adding the following to my custom CSS file which is loaded after the bootstrap css. Seems to have worked so far...
.navbar-collapse.in {
overflow-y: visible;
}