search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
33.25k stars 1.27k forks source link

bug: Bad placement of the buttons in the bottom-navigation in iOS PWA mode #1732

Open EzHeisenberg opened 1 year ago

EzHeisenberg commented 1 year ago

What version of daisyUI are you using?

v.2.51.5

Describe your issue

While developing a web application on iPhone in PWA mode, I used the Bottom-navigation component, I realized that there was a bad placement of the navigation buttons container when using the tag for iOS : 

The <meta name="viewport" content="viewport-fit=cover"> is required for responsive of the bottom navigation in iOS.

here are some examples, we can see here that icons, texts or both not a good position

IMG_3550 IMG_3549 IMG_3548

What browsers are you seeing the problem on?

Safari

Reproduction URL (optional)

No response

saadeghi commented 1 year ago

Can you give me a code example to test?
Also can you try increasing the height of btm-nav using a h-* tailwind utility class? I think your items are bigger than the available height.

EzHeisenberg commented 1 year ago

Of course, I used it in a basic case. but in the h-*

HTML

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="icon" href="">
    <meta name="viewport" content="viewport-fit=cover, width=device-width, height=device-height, initial-scale=1"/>
</head>
    <body>
        <div class="container mx-auto max-w-5xl p-4">
            <div class="text-sm breadcrumbs pb-4 text-gray-500">
                <ul>
                    <li>
                        <a href="#">Accueil</a>
                    </li>
                </ul>
            </div>
        </div>

        <div class="btm-nav ">
            <a href="{{ path('app_index') }}">
                <em class="fa-solid fa-house w-5 h-5"></em>
                <span class="btm-nav-label">Home</span>
            </a>

            <a href="{{ path('app_worksite') }}">
                <em class="fa-solid fa-cubes w-5 h-5"></em>
                <span class="btm-nav-label">Projets</span>
            </a>

            <a href="{{ path('app_fee') }}">
                <em class="fa-solid fa-ticket w-5 h-5"></em>
                <span class="btm-nav-label">Frais</span>
            </a>

            <a href="{{ path('app_user') }}">
                <em class="fa-solid fa-user w-5 h-5"></em>
                <span class="btm-nav-label">Profil</span>
            </a>
        </div>

    </body>
</html>

CSS

body{
    min-height: 100vh;
    background-color: #f4f4f4;
}
EzHeisenberg commented 1 year ago

when I apply a h-* the height changes as expected, except that it doesn't look very nice because the elements are centered vertically and the bottom-navigation block looks big.

h-28

IMG_3551

h-24

IMG_3552

h-20

IMG_3553

On the other hand, on Chrome browsers, brave... the expected behavior of the navigation bar is the right one

image
saadeghi commented 1 year ago

.btm-nav has this style padding-bottom:env(safe-area-inset-bottom); to make space for iOS "home bar" (that line on the bottom). without that padding, your menu items would go under that line so I think you should keep that padding. the value of padding is env(safe-area-inset-bottom) but you can change it using utility classes like pb-4 or pb-2 or anything. let me know if that fixes the problem for you.

thobson commented 1 year ago

I'm seeing similar behaviour (using standard btm-nav) during scroll (when the home bar is not visible). Please see the screenshot. Do I need to somehow watch for window resize events and apply a new padding if the home bar is not visible? thanks

With home bar:

IMG_7619

Without home bar:

IMG_7620

thobson commented 1 year ago

Strangely, the issue seems to be with the use of env(safe-area-inset-bottom) at least in the latest iOS version. Using pb-0 works for me.

raphaelbadia commented 1 year ago

Hello, a possible workaround is to add h-auto to the parent div and a bit of padding in the children if necessary

before: 

<div className="btm-nav z-50 bg-base-100 drop-shadow-sm">
   .......
</div>
before

after:

<div className="btm-nav z-50 bg-base-100 drop-shadow-sm h-auto">
   .......
</div>
after with h-auto
dillonfagan commented 11 months ago

I'm having the same issue with my app when it's installed as a PWA on iOS. Using h-auto does not solve the issue for me. It only reduces the height of the navbar when the app is viewed in-browser. Adding top padding causes the nav indicator to render on top of the nav items.

<div class="btm-nav lg:hidden">

Screenshot 2023-10-04 at 4 22 56 PM

dillonfagan commented 11 months ago

I think I found a solution: add box-content to the same container using the btm-nav style.

That will allow the height of the box to increase when the bottom padding is applied. The problem was that the height was fixed to 64px.

lgraubner commented 8 months ago

The box-content fix works fine for me. I could provide a PR if wanted. Let me know/assign me. :)

miteyema commented 6 months ago

@dillonfagan Thanks for box-content, you saved me a lot of time!

Mdev303 commented 5 months ago

you can also see this bug on the daisyui website on ios https://daisyui.com/components/bottom-navigation/ a PR would be good