Modal is pushed to bottom of screen and cutoff on mobile devices

[jringeisen]

I'm testing this on my iPhone 10X and the modal appears at the bottom of the screen and a portion of the modal is cutoff, you have to scroll the modal up with your finger for it to fit on the screen. I've messed around with some of the stylings to see what's causing this but haven't been able to figure it out. Does anyone know what's causing this?

[jacovdbergh]

Same thing happens for me on a Pixel 4a.

Looks to be intentionally aligned to the bottom on < sm breakpoints, items-end in the following line
https://github.com/livewire-ui/modal/blob/0fe7036574868758f328e2266ecf27d3b30b7555/resources/views/modal.blade.php#L20

Changing that to items-center works, but @PhiloNL probably had a reason for end?

[PhiloNL]

@jacovdbergh on mobile the modal is pushed down to make it easier to reach with your fingers. @jringeisen did you change the markup of the modal? Because it should fill the entire screen and become scrollable if the modal is quite big.

[jringeisen]

@PhiloNL the modal is scrollable and I can use my finger to scroll and bring it into view, but this is a small modal and should fit on the screen without having to scroll. When I use Enter Responsive Mode in safari on my MacBook it looks good and does what it's supposed to, but when I use the modal on my mobile device it gets cut off. I didn't make any changes to the modal markup.

[jringeisen]

@jacovdbergh items-center fixed this issue for me.

[jacovdbergh]

Seems like the issue (on Android Chrome at least) is when the URL/menu bar is shown at the top. Then the min-height: 100vh; element is pushed off by the menu's height at the bottom, and the modal also gets cut off at the bottom.

[Msangi21]

@jacovdbergh items-center fixed this issue for me.

I try this suggestion but does not work
Does any other solution please?

[jringeisen]

@Msangi21 items-center should put the modal in the middle of the screen. Maybe share your code so we can see?

[Msangi21]

Hi, @jringeisen sorry for the late reply the bellow is my code.

<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-10 text-center sm:block sm:p-0">

[Msangi21]

I found there is a conflict with my CSS

[Msangi21]

Hello. Anyone how uses this package with bootstrap 5. Because I still facing the same challenge but when I comment on my CSS link it works fine.

[Msangi21]

This is what happening

[sawirricardo]

Hi, just want to make sure if the items-center has been fixed? or should we implement it ourselves? Thank you

[roni-estein]

Always remember you can publish the views and configs to tailor it to your needs! Just keep in mind to not just blindly upgrade without looking at the tag changes. Sometimes, in a case like this when I want someone to maintain most of the burden and I just want to use the package I'll lock it at a tag, and if a new version comes out that fixes it, I'll pull out my overrides and jump back to defaults. If your overrides are pretty extensive, you can fork the repository and use it in the project instead. That way you can break off the trunk at that point and either PR in fixes, or just continue to maintain your own upgrade paths. I do that from time to time when I have needs that differ from the main intention of the project but it starts off as a great base. Or when people just run out of time. We all get smoked occasionally.

[francisakortia]

Hi. This issue seems to be still pending. Any fix?

[david-909]

It seems that the container that is holding the modal has a class that aligns it to the bottom. I tried removing that class but that did not fix it.
Only fix I could find so far (not the best option to be honest) is to access #modal-container in css and give it margin-bottom

[iappaPedroza]

I´m getting that same issue, and figured out that it´s caused by a conflict with boostrap 5 css

that is the basis CSS framework from the original project. And I´ve tried to use livewire/wire-elements to exhibit dynamic data in modal screens. Well, watching console I´ve found the piece of code that is "Bugging" the position of the modal, as seen at pics below. In that prints are also, the change I´ve made in the code by the console, and it´s worked, but the question now is, where I may correct this on my code?

[reppair]

@jringeisen @jacovdbergh let's clarify something, items-center will just pull up the modal to the center of the viewport, while the modal is meant to stay at the bottom on mobile and be full-width for various reasons. It does not fix the problem it just makes it visible.

That said, let's outline the problem - chrome and safari put their controls in a bar on top of the viewport in some strange way. It behaves almost like the controls bar is part of the page and is .absolute inset-x-0 bottom-0 :)

Now having that said as well, any ideas how to fix it? I am thinking getting the size of it with JS and account for it somehow. 📐

Edit 1: This article explains the issue.

[reppair]

A proper fix (tested)

Yeah, that seem to be working for me.

1. Create a utility class in the root CSS file for the tailwind build (I've called mine min-h-calc-screen ..but hey!)

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
    /** Fix for the VH unit in webkit browsers. See: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ */
    .min-h-calc-screen {
        min-height: 100vh; /* Fallback for browsers that do not support Custom Properties */
        min-height: calc(var(--vh, 1vh) * 100);
    }
}

2. Add the function and event listener script into your document (or in your build)

<script type="application/javascript">
    function setCustomCSSViewportHeightVariable() {
        // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
        let vh = window.innerHeight * 0.01;
        
        // Then we set the value in the --vh custom property to the root of the document
        document.documentElement.style.setProperty('--vh', `${vh}px`);
    }
    
    setCustomCSSViewportHeightVariable();

    window.addEventListener('resize', () => setCustomCSSViewportHeightVariable());
</script>

3. Replace .min-h-screen with your custom utility class (.min-h-calc-screen in my case)

diff --git a/resources/views/vendor/livewire-ui-modal/modal.blade.php b/resources/views/vendor/livewire-ui-modal/modal.blade.php
index e196f0944..df2c1b1f7 100644
--- a/resources/views/vendor/livewire-ui-modal/modal.blade.php
+++ b/resources/views/vendor/livewire-ui-modal/modal.blade.php
@@ -40,7 +40,7 @@
         class="fixed inset-0 z-30 overflow-y-auto"
         style="display: none;"
     >
-        <div class="flex items-center justify-center min-h-screen text-center sm:block sm:p-0">
+        <div class="flex items-end justify-center min-h-calc-screen text-center sm:block sm:p-0">
             <div
                 x-show="show"
                 x-on:click="closeModalOnClickAway()"

Result

latest Chrome on iOS	Latest Safari on iOS

[timgavin]

I was having this same problem in Safari desktop, and this reply fixed it for me. Maybe it's the same issue on mobile browsers?

#244 (comment)

[reppair]

I was having this same problem in Safari desktop, and this reply fixed it for me. Maybe it's the same issue on mobile browsers?

#244 (comment)

It is completely different issue.

[martinschenk]

I had the same issue on iPhone X MAX in Safari and Chrome latest versions 2022/11
The solution from @reppair worked perfect.
Issue is closed, but still an issue.

[Hesesses]

Could it be possible to have a param so you can choose bottom or top alignment?

[abbasmashaddy72]

I am Also Having the same issue

[timgavin]

It seems that the container that is holding the modal has a class that aligns it to the bottom. I tried removing that class but that did not fix it.
Only fix I could find so far (not the best option to be honest) is to access #modal-container in css and give it margin-bottom

Works perfectly, and is much better than having to make the user work to see the modal content.

<div class="flex justify-center items-center">
    <!-- modal content -->
</div>

#modal-container {
    margin-bottom: auto;
}

[peroxovy]

I saw the issue and I've dig a little bit.

I know, that's not good approach but I've found inside \vendor\wire-elements\modal\resources\views\modal.blade.php on the line 17th next to flex class, the definition of items-end instead of items-center.

I've changed this to items-center and it goes back to the middle spot on the page.
Maybe it should be a root cause, maybe not. If you have any ideas or thoughts, please let me know.

@edit, sorry I've didn't saw 1st comment 👯‍♂️

[reppair]

@peroxovy see this comment

[peroxovy]

@reppair, so what about people who want's to have their modal on middle on mobiles? The fixed bottom on mobile devices was imposed from above.

[reppair]

@peroxovy sure, if centering the modal on mobile works for what you are building that's fine.. I just wanted to point you to a description of the actual problem with it.

[Wraxton]

The described issue appears to have been addressed natively.

[reppair]

Yep. @Wraxton and I both tested it. Seems to be fixed on mobile browsers level!

[victorybiz]

This seems to be working for me.

#modal-container {
    @apply !align-middle;
}

or

#modal-container {
   vertical-align: middle !important;
}