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