1

The scroll bar on the page disappears when a jquery confirm dialogue is shown, this causes the page to jump to the right. The JavaScript code for the dialogue is as follows:

<script src="vendor/jquery-confirm.min.js"></script>
<link href="vendor/jquery-confirm.min.css" rel="stylesheet" type="text/css">
<script>
    function confirmDialog(content, func, parameter) {
        $.confirm({
            title: "",
            content: content,
            confirmButton: "Yes",
            cancelButton: "No",
            theme: "black",
            confirm: function() { func(parameter); },
            cancel: function() { }
        });
    }
</script>

I am using the CSS:

body {
    overflow-y: scroll;
}

How can I prevent this from happening?

Update

I tried adding "important", but inspecting the page in Firefox I see there is this CSS:

body.jconfirm-noscroll {
    overflow: hidden !important;
}

And there is a line through:

overflow-y: scroll !important;
gornvix
  • 3,154
  • 6
  • 35
  • 74
  • Possible duplicate of [Jquery modal dialogs DISABLE the scrollbars](https://stackoverflow.com/questions/8935301/jquery-modal-dialogs-disable-the-scrollbars) – mjw Jun 07 '17 at 18:45
  • I'm referring to the scroll bar on the page, not a scroll bar in the dialogue. I'll update my post. – gornvix Jun 07 '17 at 18:48
  • So what's your question? This is default browser behavior. Either make the scrollbar always visible, or if you want to "compensate" for it, then apply a margin or something similar. – Tyler Roper Jun 07 '17 at 18:50
  • How can I prevent this from happening? I'll update my post again. – gornvix Jun 07 '17 at 18:50
  • Possible duplicate of [How to prevent scrollbar from repositioning web page?](https://stackoverflow.com/questions/1417934/how-to-prevent-scrollbar-from-repositioning-web-page), [Always show browser to prevent page jumping](https://stackoverflow.com/questions/12582555/always-show-browser-scrollbar-to-prevent-page-jumping), [Scroll bar appears and makes page jump](https://stackoverflow.com/questions/5834196/scroll-bar-appears-and-makes-page-jump), etc. There's also tons of Google results about how to combat this behavior. What research or attempts have you already made to solve this on your own? – Tyler Roper Jun 07 '17 at 18:51
  • I already applied the "overflow-y: scroll" CSS. It does not work with jquery confirm. Unless I could target the dialogue with CSS... I don't know how to do that. – gornvix Jun 07 '17 at 18:53
  • 1
    @tyebillion I believe I'm now understanding your issue. Check out the CSS you're attaching for this plugin and look for a `body { } ` rule that is overriding your `overflow-y: scroll`, OR you can try doing `overflow-y: scroll !important;` to counter-act the dialog's CSS settings. If you right click the body and go to Inspect Element when the dialog is visible, it will tell you if there's CSS overriding your own and if so, where it's coming from. – Tyler Roper Jun 07 '17 at 19:00
  • @Santi I tried the "important" rule and updated my question with the results of this. – gornvix Jun 07 '17 at 19:08
  • Change your declaration to be the same as the one that's overriding it: `body.jconfirm-noscroll !important { ... }`, so that they are of equal specificity. In CSS, more specific rules will override less specific rules, and because their rule specifies "any `` element with *this* class", and yours only specifies "any `` element", theirs will override yours. – Tyler Roper Jun 07 '17 at 19:10

2 Answers2

3

CSS is mathematics. Each selector boils down to a specificity number. If numbers are equal, the last one applies. If they are not equal, the highest applies, regardless of order.

You could try to use tools like specificity calculator to link selectors to particular numbers but, really, you don't need to.

The general point is: 

!important > style="inline rules" > #id > .class > attribute = element

The selector you're trying to override is:

body.jconfirm-noscroll {
   some rule !important;
}

This means !important + 1 x class + 1 x element. You could override it with the same exact selector as long as yours is placed lower in page (parsed later by browser).

Or, to make sure, you could override it with 

html body.jconfirm-noscroll {
  some rule !important;
}

Or, of course, if you know any other class you have on body, add it to the selector. Or put an #id on <body> and use it. It will beat the .class. But you can't beat body.class !important with body !important. That is a certainty.

Important note: There will be cases when you are absolutely certain your selector is stronger, but it still refuses to apply. Don't dispair. It happens to us all. From experience, it falls down in any of these cases:

  • you have a syntax error in a previous rule which disables the one you're currently looking at (check for unclosed braces)
  • an even stronger selector applies. please be aware that inline styles (placed in style attribute of the element) are actually stronger than #ids. That's why styles applied via javascript usually apply. They don't override !importants, though
  • your markup is utterly broken. In rare cases, when your markup is not valid, css doesn't apply because the elements you are looking at are not the elements you think they are for the browser. I'm talking cases of nested <a> tags and similar
  • if none of the above help, check your selector closely. Check it against the markup, step by step. Make sure it has spaces where it should have and doesn't have where it shouldn't have. I'm considered (by some) a CSS expert but you'd be surprised at how many times I write faulty selectors and it takes me a good minute or two to spot the typo. It has something to do with being human, I guess.
tao
  • 82,996
  • 16
  • 114
  • 150
  • Why do you need "html >" ? Isn't everything in HTML? – gornvix Jun 07 '17 at 20:22
  • @tyebillion, you're right, we don't need the immediate sibling selector here, `` is a direct child of `` and cannot be otherwise (or your page would have way bigger problems). I've added it out of habit. The rule of thumb in writing CSS selectors is to make sure what you write doesn't leak to other cases. So, when you know about a certain immediate sibling relation, the impulse is to put the `>` in. But you're right, it's neither needed nor useful here. A reason for using (when it doesn't make a difference) is because it has increased visibility/readability. – tao Jun 07 '17 at 20:25
1

Overriding CSS can be tricky...

You can try

body, body.jconfirm-noscroll {
    overflow: auto!important;
}

But that still might not work...

If not, add a class to your body e.g. <body class"please-scroll"> and try this

body.please-scroll, body.please-scroll.jconfirm-noscroll {
    overflow: auto!important;
}

I'm not sure if it will work, try it and let me know, I'd be interested!

dennispreston
  • 596
  • 4
  • 14
  • Yes that works if I use "overflow-y: scroll !important;" in your code. It is a messy solution though, but what the hell... if it works, why not use it? – gornvix Jun 07 '17 at 19:37
  • Out of interest, did you have to add the class to the body, or did it work without it? – dennispreston Jun 07 '17 at 19:42
  • Yes I added the "please-scroll" class to the body. – gornvix Jun 07 '17 at 19:46
  • 1
    You could always try `html > body.jconfirm-noscroll { overflow-y: scroll !important; }` without adding the class to the body. If it works it will be cleaner... – dennispreston Jun 07 '17 at 19:48