use dvh for modal and drawer
This commit is contained in:
committed by
Pete Matsyburka
parent
59fe8a7917
commit
b8ab7190d2
@@ -1,7 +1,8 @@
|
|||||||
|
<% offset = local_assigns[:title] ? '45px' : '0px' %>
|
||||||
<turbo-frame id="drawer">
|
<turbo-frame id="drawer">
|
||||||
<turbo-modal class="modal modal-open items-start !animate-none justify-end overflow-y-auto !justify-normal md:!justify-end" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
|
<turbo-modal class="modal modal-open items-start !animate-none justify-end overflow-y-auto !justify-normal md:!justify-end" data-close-after-submit="<%= local_assigns.key?(:close_after_submit) ? local_assigns[:close_after_submit] : true %>">
|
||||||
<div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
|
<div class="absolute top-0 bottom-0 right-0 left-0" data-action="click:turbo-modal#close"></div>
|
||||||
<div class="bg-base-100 min-h-screen max-h-screen relative w-full relative">
|
<div class="bg-base-100 min-h-screen max-h-screen relative w-full min-w-0">
|
||||||
<% if local_assigns[:title] %>
|
<% if local_assigns[:title] %>
|
||||||
<div class="flex justify-between bg-base-100 py-2 px-4 items-center border-b pb-2 font-medium">
|
<div class="flex justify-between bg-base-100 py-2 px-4 items-center border-b pb-2 font-medium">
|
||||||
<span>
|
<span>
|
||||||
@@ -14,7 +15,7 @@
|
|||||||
×
|
×
|
||||||
</span>
|
</span>
|
||||||
<% end %>
|
<% end %>
|
||||||
<div class="w-screen md:w-[620px] overflow-y-auto" style="max-height: calc(100vh - <%= local_assigns[:title] ? '45px' : '0px' %>)">
|
<div class="md:w-[620px] overflow-y-auto" style="max-height: calc(100vh - <%= offset %>); max-height: calc(100dvh - <%= offset %>)">
|
||||||
<%= yield %>
|
<%= yield %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
<a href="#" class="text-xl" data-action="click:turbo-modal#close">×</a>
|
<a href="#" class="text-xl" data-action="click:turbo-modal#close">×</a>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
<div class="w-full md:w-[590px] overflow-y-auto" style="max-height: calc(100vh - 14px - 45px)">
|
<div class="w-full md:w-[590px] overflow-y-auto" style="max-height: calc(100vh - 14px - 45px); max-height: calc(100dvh - 14px - 45px)">
|
||||||
<%= yield %>
|
<%= yield %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user