Prevent body from scrolling when modal open and jump to top - css

I've been trying many solutions and I can't seem to make this work.
I've found a solution that works for preventing the body to scroll when the modal is open:
body.modal-open {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}
This works fine. The problem is, when I open the modal the body scrolls to the top. I don't want this behaviour, and I understand it has to do with the position:fixed. I tried relative, and it did not work.
Thanks in advance.


If I understood you well, you can do something like this with Bootstrap:
// Avoid scrolling
body.modal-open, .modal-open .modal {
overflow: hidden;
}
And then add .modal-dialog-centered to .modal-dialog to vertically center the modal.
https://jsfiddle.net/4938ek6q/
Please, play resizing the result window in the example linked above to check if that's what you are looking for.
Hope this help or at least point you to the right direction :)


I ended up figuring it out. What I did was removing the css I posted on the question, and then the following jquery adding a class to the html element, and in css styling that class:
JQUERY:
$(".modal").on('show.bs.modal', function(event) {
$('html').addClass('no-scroll');
})
$(".modal").on('hide.bs.modal', function(event) {
$('html').removeClass('no-scroll');
})
CSS:
.no-scroll{
overflow: hidden;
}

Related

Double scroll bar in dialog

I fixed the height of the Bootstrap dialog, but for some reason a double scroll bar appeared, but I just needed to try overflow: hidden, but unfortunately it didn't solve the problem. The problem comes when I select a check box and the dialog jumps down since a longer part of the dialog comes in, I can't paste many codes because the components of the dialog are made up of several components.
So far I have done css formatting:
body {
overflow-y: hidden;
}
.dialog-layout-modal-body {
min-height: 662px;
max-height: 700px;
overflow: auto;
}
And the parent CSS code:
body {
overlfow: hidden;
}
Is there some bootstrap or css or any solution how can I fix this problem?

One is from browser scroll and another is from the dialog. Check if the Parent section has css property as 'overflow:auto;` which will cause this issue.
OR
you can do something like this for body tag.
body{
width:100%;
overflow-x:hidden; // hides bottom scroll
overflow-y:hidden; // hides vertical scroll
}

SVG being overflow:hidden by bootstrap. Why?

I have an inline SVG on my webpage. I'm dynamically adjusting it's start and end coordinates with some Javascript like so https://codepen.io/anon/pen/rrYNaP?editors=1010.
However, in my webpage, I noticed that I can't see the svg due to:
svg:not(:root) {
overflow: hidden;
}
Looks like it's coming from bootstrap (I think normalize.css). I can override it
svg {
overflow: visible;
}
but then I get horizontal scroll bars and the svg is layered on top of every other div on the page (kinda needs to be in the background and z-index: -1 isn't working)
The weird thing is, when I view it in codepen, it doesn't have any of those issues.
What is going on and how can I fix this?

try with
svg {
overflow: visible !important;
}

Absolutely positioned logo in header scrolls with page

I have an absolutely positioned logo in the header bar of my page, that keeps moving down the page when scrolled.
I do not want this behavior, I want the logo to stick to the top of the page and not cover other elements when a visitor is scrolling down the page.
Here is the page in question.
www.giracci.com
and the header logo code.
logoWrapper {
float: left;
height: 0;
position: absolute;
top: 0;
width: 150px;
z-index: 30;
}
If you view the page, you'll see that it doesn't stay put, it scrolls with the page.

First:
Copy the relevant HTML and CSS to your question. There's MUCH more to the equation that you have not included. You need to essentially include all the html up to the nav container, as well as the CSS, and indicating that your question includes bootstrap (I've already done that for you).
Second:
The reason that it's exhibiting this behavior is because one of it's containers - the nav#site-navigation - is getting a fixed class applied to it when you scroll, which applies the following styles:
nav.fixed {
position: fixed;
visibility: hidden;
opacity: 0;
}
And, because you are using the bootstrap class of visible-lg on the logo wrapper, it gets this style:
.visible-lg {
display: block !important;
}
Which overrides the .fixed hidden property.
And, because the logo is inside that wrapper, that causes the logo to show up when you don't want it to.
So, you're using colliding classes, and need to straighten them out.

Add this to your css file:
No need to change much of the code.
your navbar is adding fixed class when it is scrolled.
nav.fixed .logoWrapper {
display: none;
}

First of all I would change these parameters in the css to display correctly the nav, to make sure that the menu items do not go below the logo:
.container {
width:auto;
}
.container.nav-bar {
width:auto;
margin:0 60px;
}
After you've done this, if you want to hide everthing when you're scrolling the page (logo and nav), add this to your css:
nav.fixed.scrolled {
display:none;
}
however, if you want that the only logo is fixed when you're scrolling the page add and edit these parameters on the CSS:
.logoWrapper {
position:fixed;
}

There is one more way around you can try. Because currently on your site it disappears at once so it feels like there is kind of a glitch/stutter, very slight. I needed something like this with my logo so I did it with JS. And it works like a charm. Here is the following code:
$(window).scroll(
function () {
var top = 75;
var currentTop = $(window).scrollTop();
if (currentTop > top) {
$(".logo").css("opacity", "0");
} else {
$(".logo").css("opacity", "1");
}
});
Simply replace .logo with your .logowrapper or whatever. Hope it works.

Elements in my web pages become distorted when i try to resize the browser window

I am new to css, i created a webpage using css and it looks perfectly as expected when browser is maximized. But when i retrying the web page, the div elements i used in the page overlap each other making the perfect mess of things...!
I tried wrapping the div element.
#wrapper
{
min-width:500px;
overflow-x:scroll;
}
and also tried to set minimum-width attribute to parent div. Nothing worked out...
Please Help.

Try
#wrapper
{
min-width: 500px;
overflow-x: scroll;
position: relative;
}

Custom CSS, CANNOT LINE UP THE IMAGE SCROLLER

http://www.shaunhillphotography.co.uk/
I have an image scroller on my front page and I want it to span the width of the white space. I had it working earlier but accidentally removed the code when I was tweaking the customer CSS.
It looks like it relates to:
#riva-slider{
}
I don't know what I need to put in to get the positioning correct.
Any help would be gratefully appreciated.

You can try increasing the width of the shell and using margin-left to push it to the edge of whitespace.
#riva-slider-1-shell {
width: 1000px;
margin-left: -25px;
}

Try to add in your CSS file:
#riva-slider-1-shell {
overflow: hidden;
}

Resources