Level 4
I've encountered this too. Can you share your blade file where the modal is included?
Apr 1, 2022
4
Level 12
TailwindCSS issues on iOS devices
I have an application that uses modals. The modal uses the following template.
<div class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<div @click.away="show = false" class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle w-5/6 xl:w-4/6 sm:p-6">
<div>
<div class="row flex justify-center">
@include('partials.icon_buttons.help')
</div>
<div class="mt-3 sm:mt-5">
CONTENT
</div>
<div class="row flex justify-center mt-5 sm:mt-6">
<button @click="show = false" type="button" class="mt-3 w-1/2 inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm">
Close
</button>
</div>
</div>
</div>
</div>
On the desktop these work fine. They also look fine on android devices. The problem is that they display inconsistently on iOS devices. Some work, some display but have the same opacity as the background and are sitting below (z-plain) the side menu bar.
Landscape Landscape
Portrait Imgur
The modal is displayed using Alpine with the following code.
<div x-show="show" x-cloak x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-description="Modal panel, show/hide based on modal state.">
@include('partials.modals.documentation.home.home')
</div>
I'm using TailwindCSS v 2.2.19 with postcss-import and autoprefixer. The App is written in Laravel v8 and uses Livewire and Alpine.
If anyone has any ideas on how I can solve this I would be very grateful. I can share more code if required.
Level 12
Here is the main layout blade file.
@props([
'title' => 'Home'
])
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="{{asset('/css/fonts.css')}}">
<!-- Favicon -->
<link rel="icon" href="{{ asset('images/favicon.ico') }}">
<!-- Styles -->
<link rel="stylesheet" href="{{ asset('css/app.css') }}"/>
<link rel="stylesheet" href="{{ asset('css/my.css') }}"/>
<!-- Alpine Plugins -->
<script src="{{ asset('js/alpine_focus_1645203215.min.js') }}"/>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/alpine_1645203215.min.js') }}" defer></script>
@livewireStyles
</head>
<body class="font-sans antialiased">
<div class="min-h-screen bg-gray-100">
<div class="" style="">
<div style="min-height: 640px;" class="bg-gray-100">
<div x-data="{ open: false }" @keydown.window.escape="open = false"
class="h-screen flex overflow-hidden bg-gray-100">
<div x-show="open" class="fixed inset-0 flex z-40 md:hidden"
x-description="Off-canvas menu for mobile, show/hide based on off-canvas menu state."
x-ref="dialog" aria-modal="true" style="display: none;">
<div x-show="open" x-transition:enter="transition-opacity ease-linear duration-300"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="transition-opacity ease-linear duration-300"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
x-description="Off-canvas menu overlay, show/hide based on off-canvas menu state."
class="fixed inset-0 bg-gray-600 bg-opacity-75" @click="open = false" aria-hidden="true"
style="display: none;"></div>
<div x-show="open" x-transition:enter="transition ease-in-out duration-300 transform"
x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0"
x-transition:leave="transition ease-in-out duration-300 transform"
x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full"
x-description="Off-canvas menu, show/hide based on off-canvas menu state."
class="relative flex-1 flex flex-col max-w-xs w-full bg-indigo-300" style="display: none;">
<div x-show="open" x-transition:enter="ease-in-out duration-300"
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
x-transition:leave="ease-in-out duration-300" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-description="Close button, show/hide based on off-canvas menu state."
class="absolute top-0 right-0 -mr-12 pt-2" style="display: none;">
<button
class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
@click="open = false">
<span class="sr-only">Close sidebar</span>
<svg class="h-6 w-6 text-white" x-description="Heroicon name: outline/x"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
<div class="flex-shrink-0 flex items-center px-4">
<img class="h-8 w-auto" src="{{asset('/images/xxxxxxx_logo_200x80.png')}}"
alt="xxxxxxx Logo">
</div>
<nav class="mt-5 px-2 space-y-1">
{{--Mobile Menu--}}
</nav>
</div>
<div class="flex-shrink-0 flex border-t border-indigo-800 p-4">
<a href="{{route('home')}}" class="flex-shrink-0 group block">
<div class="flex items-center">
<div class="ml-3">
<p class="text-lg font-medium text-indigo-800">
{{\Spatie\Multitenancy\Models\Tenant::current()->name}}
</p>
<p class="text-base font-medium text-indigo-800">
{{auth()->user()->name}}
</p>
<p class="text-sm font-medium text-indigo-600 group-hover:text-white">
View profile
</p>
</div>
</div>
</a>
</div>
</div>
<div class="flex-shrink-0 w-14" aria-hidden="true">
<!-- Force sidebar to shrink to fit close icon -->
</div>
</div>
<!-- Static sidebar for desktop -->
<div class="hidden bg-indigo-200 md:flex md:flex-shrink-0">
<div class="flex flex-col w-64">
<!-- Sidebar component, swap this element with another sidebar if you like -->
<div class="flex flex-col h-0 flex-1">
<div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
<div class="flex items-center flex-shrink-0">
<img class="h-8 w-auto mx-auto" src="{{asset('/images/xxxxxxxx_logo_200x80.png')}}"
alt="xxxxxxxx Logo">
</div>
<div class="mx-auto">Expenses Portal</div>
<nav class="mt-5 flex-1 px-2 space-y-1">
{{--DesktopMenu--}}
</nav>
</div>
<div class="flex-shrink-0 flex border-t border-indigo-800 p-4">
<a href="{{route('home')}}" class="flex-shrink-0 w-full group block">
<div class="flex items-center">
<div class="ml-3">
@auth
<p>
<image
class="mb-2 h-10 w-10 rounded-full ring-4 ring-white font-bold"
src="https://eu.ui-avatars.com/api/?name={{auth()->user()->name}}&background=random&rounded=true"
alt="User Avatar Logo"/>
</p>
@endauth
<p class="text-lg font-bold text-gray-800">
{{\Spatie\Multitenancy\Models\Tenant::current()->name}}
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<main class="flex-1 relative z-0 overflow-y-auto focus:outline-none">
<x-banner/>
<div class="py-6">
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<h1 class="text-md lg:text-xl font-semibold text-gray-900">{{$title}}</h1>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
<!-- Replace with your content -->
<div class="py-4">
<div class="border-4 border-gray-200 rounded-lg p-2">
<div>
{{$slot}}
</div>
</div>
@include('partials.footer')
</div>
<!-- /End replace -->
</div>
</div>
</main>
</div>
</div>
</div>
</div>
<x-notification></x-notification>
</div>
@stack('scripts')
@livewireScripts
</body>
</html>
Here is the blade file that contains the modal.
<div x-data="{ show: false, fixes: false }">
<div class="p-4">
<div class="max-w-4xl border border-indigo-300 mx-auto bg-indigo-100 rounded-lg shadow-lg">
<div class="row flex justify-between items-center">
<div class="row flex justify-start">
<div class="p-4 text-2xl font-bold text-gray-800 truncate">
@if(!$showNameEdit)
{{auth()->user()->name}}
@else
<x-input type="text" wire:model.lazy="update_name" name="update_name" id="update_name"
class="block min-w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs
sm:text-sm border-gray-300 rounded-md"/>
@endif
</div>
@if(!$showNameEdit)
<x-buttons.button label="edit" class="h-6 mt-5 text-xs px-1" wire:click="openNameEdit"/>
@else
<x-buttons.button label="save" class="h-6 mt-6 text-xs px-1" wire:click="updateName"/>
<x-buttons.button label="cancel" class="ml-2 h-6 mt-6 text-xs px-1"
wire:click="$set('showNameEdit', false)"/>
@endif
</div>
<div class="pt-4 px-4 row flex justify-end">
<img class="h-16 w-16 rounded-full ring-4 ring-white"
src="https://eu.ui-avatars.com/api/?name={{auth()->user()->name}}&background=random&rounded=true"
alt="">
</div>
</div>
<div class="px-4 pb-4">
<dl class="mt-6 grid grid-cols-1 gap-x-4 gap-y-8 lg:grid-cols-2">
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
Company
</dt>
<dd class="mt-1 text-lg font-bold text-gray-600">
{{\Spatie\Multitenancy\Models\Tenant::current()->name}}
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
Username
</dt>
<dd class="mt-1 text-lg font-bold text-gray-600">
{{auth()->user()->username}}
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
Email
</dt>
<dd class="mt-1 text-lg font-bold text-gray-600">
{{auth()->user()->email}}
</dd>
</div>
@if(\Spatie\Multitenancy\Models\Tenant::current()->payments_issued_by_xxxxxxx)
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
Payroll Number
</dt>
<dd class="mt-1 text-lg font-bold text-gray-600">
{{(auth()->user()->payroll_number == null) ? "Not Set" : auth()->user()->payroll_number}}
</dd>
</div>
@endif
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
Company Car / Car Allowance
</dt>
<dd class="text-lg font-bold text-gray-600">
{{(auth()->user()->company_car_allowance?'Yes':'No')}}
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
Approver
</dt>
<dd class="mt-1 text-lg font-bold text-gray-600">
{{auth()->user()->isApprovedBy->name}}
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm font-medium text-gray-500">
Last Visit
</dt>
<dd class="mt-1 text-lg font-bold text-gray-600">
{{auth()->user()->last_visit->format('d-m-Y')}}
</dd>
</div>
<div class="sm:col-span-2">
<hr class="border border-indigo-200 mb-2">
<dt class="text-sm font-medium text-gray-500">
@if(auth()->user()->userTypes->count() > 1)
Roles
@else
Role
@endif
</dt>
</div>
</dl>
<div class="grid grid-cols-1 gap-x-4 lg:grid-cols-2">
@foreach(auth()->user()->userTypes as $type)
<div class="sm:col-span-1 text-lg font-bold text-gray-500">
{{$type->user_type}}
</div>
@endforeach
</div>
</div>
</div>
@if(\Spatie\Multitenancy\Models\Tenant::current()->payments_issued_by_xxxxxxx)
<div class="mt-4 p-4 max-w-4xl border border-indigo-300 mx-auto bg-indigo-100 rounded-lg shadow-lg">
<div class="sm:flex-1 sm:min-w-0 sm:flex sm:items-center sm:justify-end sm:space-x-6 sm:pb-1">
<div class="2xl:block min-w-0 flex-1">
@if(auth()->user()->locked_awaiting_details_update)
<h1 class="text-2xl font-bold text-red-500 truncate">
Bank Details <span class="ml-2 text-sm">Please Update</span>
</h1>
@else
<h1 class="text-2xl font-bold text-gray-800 truncate">
Bank Details
</h1>
@endif
</div>
@if(!$showBankDetails)
<div class="row flex justify-end">
<x-buttons.button wire:click="displayBankDetails()"
class="text-xs mt-2 px-2 py-1 uppercase font-bold"
label="Click to display Bank Details"/>
</div>
@endif
</div>
@if($showBankDetails)
@include('partials.modals.show_bank_details')
@endif
</div>
@endif
<div class="mt-4 p-4 max-w-4xl border border-indigo-300 mx-auto bg-indigo-100 rounded-lg shadow-lg">
<div class="sm:flex-1 sm:min-w-0 sm:flex sm:items-center sm:justify-end sm:space-x-6 sm:pb-1">
<div class="2xl:block min-w-0 flex-1">
<h1 class="text-2xl font-bold text-gray-800 truncate">
Password
</h1>
</div>
<div class="row flex justify-end">
<x-buttons.button wire:click="showChangePasswordModal"
class="text-xs mt-2 px-2 py-1 uppercase font-bold"
label="Click to Change Password"/>
</div>
</div>
@if($showBankDetailsPasswordModal)
@include('partials.modals.bank_details_password')
@endif
@if($showEditBankDetailsModal)
@include('partials.modals.edit_bank_details')
@endif
@if($showChangePasswordModal)
@include('partials.modals.change_password')
@endif
@if($showLockedAwaitingUpdateModal)
@include('partials.modals.locked_awaiting_details_update')
@endif
</div>
</div>
<div class="row flex justify-between items-center">
<button @click="show = true">
<div class="row flex justify-start items-center space-x-2">
<div class="flex items-center justify-center h-8 w-8 rounded-full bg-white">
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="info-circle"
class="h-10 w-10 text-indigo-600" fill="none" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z">
</path>
</svg>
</div>
<div class="font-bold text-base text-indigo-600">HELP</div>
</div>
</button>
</div>
<div class="row flex justify-center">
<h6 class="mt-2 font-bold text-indigo-800 text-base">If you have any enquiries or issues please contact <a href="mailto:{{$landlord}}" class="font-extrabold italic">{{$landlord}}.</a></h6>
</div>
<div x-show="show" x-cloak x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-description="Modal panel, show/hide based on modal state.">
@include('partials.modals.documentation.home.home') <-------------- This is the modal.
</div>
</div>
Here is the modal.
<div class="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<div @click.away="show = false" class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle max-w-xl lg:max-w-4xl">
<div class="row flex justify-center">
@include('partials.icon_buttons.help')
</div>
<div class="mt-3 sm:mt-5">
<------ Modal Content ----->
</div>
</div>
<div class="row flex justify-center mt-5 sm:mt-6">
<button @click="show = false" type="button" class="mt-3 w-1/2 inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:col-start-1 sm:text-sm">
Close
</button>
</div>
</div>
</div>
Level 4
@finchy70 you have an open div in your main layout file. add another closing tag
@livewireScripts
</div> //HERE
</body>
I didn't investigate past that. hope that's all it was
Level 12
That was not causing the issue. I have fixed the overlaping side menu issue by increasing the modals z- value. The issue seems to be with bg-opacity now. If I remove
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
It all works fine but does not look as good. Any ideas?
Please or to participate in this conversation.