CODEWITHSUNDEEP
csstailwind-cssalpine.js
Petro Gromovo
Petro Gromovo

Reputation: 2235

How make modal dialog covering app page with with horizontal scrolling?

Basing on tailwindcss 2 modal example https://alpinetoolbox.com/examples/modal I use modal dialog in my tailwindcss 2, Alpinejs 2 app and it works for me except cases when I use a lot of data on the page with horizontal scrolling. In this case modal dialog covers only visible part of the screen, what is not good.

I tried some ways to set height of modal to full height, like :

<!--Overlay-->
<div class="overflow-auto w-full h-full" style="background-color: rgba(0,0,0,0.5)" x-show="showModal" :class="{ 'absolute inset-0 z-10 flex items-center justify-center': showModal }">

but failed.

Could you please check pen: https://codepen.io/petrogromovo/pen/yLMNVLr

Upvotes: 1

Views: 1686

Answers (1)

juliomalves
juliomalves

Reputation: 50338

You can simply replace the position absolute with fixed on the overlay div.

<div 
    class="overflow-auto w-full h-full" 
    style="background-color: rgba(0,0,0,0.5)" 
    x-show="showModal" 
    :class="{ 'fixed inset-0 z-10 flex items-center justify-center': showModal }"
>

Upvotes: 2

Related Questions