Bug: Forms not showing on self registration page on Mobile

[romdricks]

On mobile; most of the forms are not showing when more than one people is selected when registering a new family on the self register page.

A clear and concise description of what the reported bug is:

• ChurchCRM version: 5.5.0
• PHP version the server running: PHP 8.1
• DB Server and Version the server is running: MySQL

Expected behavior

Heading and all forms should show.

Screenshots and/or logs

If applicable, please include screenshots or share logs to assist in explaining your issue.

📋 Relevant screenshots:

Smartphone (please complete the following information):

• Device: Multiply devices
• OS: Android 13
• Browser (and Version): Chrome

[romdricks]

I have been doing some testing and this seems to solve the problem; I added "height: 100%" to:

/external/templates/registration/family-register.php
line 29: <div class="register-box" style="width: 75%;">

Your expertise is really appreciated on the above thanks.

[MrClever]

I have confirmed this affects mobile and desktop platforms on browsers using recent Webkit engines (ie, Safari on Sonoma 17.3 etc) and the latest Firefox Gecko engine, but not older WebKit (MS Edge/Chrome). The flex container is creating wild min-height values such as min-height: 3465.17px (Safari/Gecko) but loading the same page on Chrome/Edge min-height: 704.094px despite rendering on all desktop browsers with the same window size. This means the form is a long way off-screen and unless the users notices the scroll bar, they would probably assume a blank page has been loaded!

I assume this is some weird browser rendering voodoo but couldn't track down the fix. So far I've confirmed this behaviour as follows:

Browser + Ver.	OS	Browser String	Status
Safari 17.3	MacOS	Version/17.3 Safari/605.1.15	Affected 😡
Safari 17.3	iOS/iPadOS	Version/17.3 Mobile/15E148 Safari/604.1	Affected 😡
Firefox 122	MacOS	Gecko/20100101 Firefox/122.0	Affected 😡
Edge 121.0.2277.83	MacOS	Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0	Not Affected 👌

@DawoudIO / @grayeul / @DAcodedBEAT - any ideas??

[grayeul]

I can confirm seeing this same problem on Browser: Firefox 115.6.0esr, OS: RockyLinux 8.9 -- interestingly, I get the same exact min-height: 3465.17px value... which is suspicious, I would think. I haven't started trying to look into it yet -- just reproduced it.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[romdricks]

any solution for this?