#Alignment Issues when using inputs

1 messages · Page 1 of 1 (latest)

barren solstice
#

Whenever there is any input field and the keypad opens, the the whole footer goes up with extra space showing up. What's the best fix for this. Image attached for issue reference

IMG_20250823_132517.jpg
jovial rampart
#

This is likely caused by how your footer is positioned.

This will be some finagling to get right, but it’s definitely possible. Can you share a minimal example of your layout we can reproduce this issue in?

barren solstice
#

<body class="bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 flex flex-col min-h-screen text-base">

    <!-- Top Navigation -->
    @livewire('mobile-top-nav')

    <!-- Main Content -->
    <main class="flex-1 pt-16 pb-16 bg-slate-50 dark:bg-slate-900 w-full overflow-y-auto">
        @yield('content')
    </main>

    <!-- Bottom Navigation -->
    @include('components.bottom-nav')

</body>

layout.blade.php

<div class="bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-700 px-2 py-2 flex items-center justify-around fixed bottom-0 left-0 right-0 z-50 h-16 shadow-sm">
<div>content</div>
</div>

bottom-nav.blade.php component

#

<div class="min-h-screen bg-slate-50 dark:bg-slate-900">

    <!-- Hero Section -->
    <div class="bg-gradient-to-r from-orange-500 to-orange-600 text-white px-4 py-8">
        <div class="max-w-md mx-auto">
            <h1 class="text-2xl font-bold mb-2">Welcome to Mobile App</h1>
            <p class="text-orange-100 text-sm">Your one-stop shop for everything you need</p>

            <!-- Search Bar -->
            <div class="mt-4 relative">
                <input type="text" placeholder="Search products..." class="w-full px-4 py-3 rounded-lg bg-white/20 backdrop-blur-sm text-white placeholder-orange-100 border border-white/30 focus:outline-none focus:ring-2 focus:ring-white/50">
                <svg class="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
            </div>
        </div>
    </div>

<div> LONG CONTENTS </div>
</div>

this is the search bar inside the content

elder egret
#

what version of nativephp/mobile are you on