CODEWITHSUNDEEP
javascriptjquerycsssweetalert
WebDevGuy2
WebDevGuy2

Reputation: 1249

Displaying dialog box (via alert or sweetalert) scrolls to top of page

I have a long table (ex: 1000 rows). Each row has a button on it, that, if pressed, displays a sweetalert dialog via jQuery. (http://t4t5.github.io/sweetalert/)

PROBLEM: If I scroll down, let's say to 50% of the table, when I click the button the dialog does appear correctly, BUT, the table has scrolled all the way to the top of the page. I'm pretty sure this has to do with the css position of how sweetalert is displayed. I tried changing it from fixed to absolute, but it doesn't work. 

.sweet-overlay, .sweet-alert{
    position: absolute !important;
    }

Using javascript "alert", instead of sweetalert, has the same effect. If I add "e.preventDefault();" then it works for alert, but not sweetalert.

Any ideas? Thanks!

Upvotes: 0

Views: 5820

Answers (4)

Asheesh Thakur
Asheesh Thakur

Reputation: 31

I have same issue spent Lots of time on this. Try this to fix Scroll issue.

Use the backdrop option and set it to false as below.

swal({
   backdrop:false,
   title: "Comment Posted",
   text: "Thanks, your comment has now been successfully posted.",
   type: "success"
});

Upvotes: 0

Limon Monte
Limon Monte

Reputation: 54439

The original sweet alert plugin is unsupported, I suggest you using SweetAlert2 plugin, which doesn't have the issue you mentioned.

Migration is simple, here's the migration guide: Migration from SweetAlert to SweetAlert2

Here's the example of your case (100 rows) implemented with SweetAlert2:

swal({
  html: '<table>' + '<tr><td>row</td></tr>'.repeat(100) + '</table>'
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>

Upvotes: 1

Andy
Andy

Reputation: 995

I've fixed it.

There's a CSS issue that MAY affect some users. Sweet Alert 1 and 2 both write a javascript when a modal opens, that adds a class to your 

overflow-y: scroll;

It may work for some users to simply remove this CSS, strangely, it didn't for me.

So comment out line 699 in sweet-alert.js

// addClass(document.body, swalClasses.shown); // BREAKS THEME

Update:

You CAN just add some css:

body.swal2-shown { overflow-y: none !important; }

However, I get a strange bar. But I'm doing some strange theme stuff. This is the less of two evils. :)

Upvotes: 1

PlummyD
PlummyD

Reputation: 1

Looking through the JS i can see that the legacy version of sweet alert plugin adds a style called stop-scrolling to document body on call. This seems to be what effects the position on the page.

As a quick fix on a site i was working on, commenting out the height and overflow on this style (in sweetalert.css) stopped the page jumping.

Obviously not a final solution, just a fix.

Hope this helps.

Upvotes: 0

Related Questions