Provide a config option to remove the use of "swal2-height-auto" in Swal2's CSS
shawty opened this issue · comments
When Swal2 pops open it's dialog, it places 2 class names on the document body, one of which is the "swal2-height-auto" class.
In some layouts, this is undesirable, as it breaks the layout. By way of an example, I'm currently working on an app that has a fixed height, with inner scrolling area layout. It looks like this:
When I open a Swal2 dialog however
The footer bar is moved to the bottom of the content instead of remaining at the bottom of the screen where the green arrow is pointing.
As can be seen in the web-dev tools:
the height auto class is applied.
If I use the dev-tools to remove the class
The footer returns to the bottom, but the swal display still remains ok.
Being able to control this classes use in the options for Swal2 would be advantageous.
This appears to be the behavior of the SweetAlert2 JavaScript library. This library is just a wrapper to call the JavaScript library with a C# interface in Blazor.
Please raise an issue in the https://github.com/sweetalert2/sweetalert2 repo.
No worries.
You could still offer a config option in the blazor library though?
I've actually managed to work around it by including a CSS file right at the end of my Blazor host file that contains this
body.swal2-height-auto {
height: 100% !important
}
If the blazor lib had a config option that could enable/disable this simple rule after SWAL's main CSS was loaded, then that would solve thew problem.
It is not my intention for this library to add or alter any functionality apart from what the upstream library offers. It is intended only as a .NET interface over the JavaScript library. Users shouldn't see any additional or different behavior than what they'd get if they'd used the JavaScript library.
Im having the same issue...
swal2-height-auto breaks my layout
iḿ using 9.17.1
The way I solved it was as follows:
I added
body.swal2-height-auto {
height: 100% !important
}
To my site-wide style sheet AFTER I loaded the swal base CSS
I didint worked to me.. missed to mention im using angular 8 .
Wish to try setting heightAuto to false, in params.. it seems it does the trick, seems more polite solution.
Thanks anyway
try inline style
body style="height: 100vh!important;"
it works for me
Try adding this to the end of the document.
<script> document.body.classList.remove('swal2-height-auto'); </script>
For anyone coming from Google, this was fixed two years prior to the creation of the issue, at least in the upstream library.