Giters

grych / drab

Remote controlled frontend framework for Phoenix.

Home Page:https://tg.pl/drab

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Drab.Modal.alert / Bootstrap 4 doesn't vertical scroll anymore if body overflow

guidotripaldi opened this issue · comments

commented

With past JQwery based Drab.Modal versions, when the supplied body exceeded the vertical document size it was possible to scroll the box to reach its bottom, now instead the vertical scroll isn't anymore enabled, and if the body is too long, the OK/Cancel buttons are unreachable.

Try this code varying the height parameter:

defhandler test_show_alert(socket, sender) do
    height = 800
    body = "<div style='height: #{height}px;'><p>FIRST ROW</p><div style=''><p style='position: absolute; top: 50%; bottom: 50%;'>I'M A VERY LONG DIV</p></div><p>LAST ROW</p></div>"
    Drab.Modal.alert(socket, "Message", body, buttons: [ok: "OK", cancel: "CANCEL"])
end

It seems that now, without jQuery, when Drab show the Boostrap Modal, the class ".modal-open" isn't dynamically set anymore to the <body> of the page, this way the overflow-y: auto; attribute isn't present, and scroll fails.

In Boostrap 4's CSS the scroll is enabled this way:

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
 }

so the .modal-open class has to be set in the DOM before the <div class="modal-dialog [...].

For this reason we cannot just add a class that set the overflow-v attribute supplying it to the class: parameter in the Drab.Modal.alert/4 call, because it will be applied to <div class="modal-dialog [...], not to its parent.

A brutal workaround is to redefine the .modal class in the App CSS:

 .modal {
    overflow-x: hidden;
    overflow-y: auto;
 }
commented

Nice catch, @guidotripaldi.
Could you please check master? Should be solved.

commented

Just tested. It works well! :)