Level 51
add min-h-screen here
...
<section class="flex bg-blue-100 p-4 rounded w-1/2 overflow-y-auto min-h-screen">
@livewire('conversation-component')
</section>
...
1 like
Feb 4, 2023
8
Level 63
Help overflow-y-scroll with tailwindcss
Hello,
I encounter this problem.
I want to limit the height of the body with the visible screen size of the browser.
// LAYOUT
<body class="antialiased flex flex-col gap-8 px-10 py-8 max-h-screen">
<header class="flex flex-col">
...
</header>
<main class="flex flex-col flex-grow">
@yield('content')
</main>
@livewireScripts
</body>
...
// VIEW
@extends('layout')
@section('content')
<div class="flex gap-8 w-full">
<aside class="flex bg-blue-100 p-4 rounded w-1/2 overflow-y-auto">
@livewire('connected-users-component')
</aside>
<section class="flex bg-blue-100 p-4 rounded w-1/2 overflow-y-auto">
@livewire('conversation-component')
</section>
</div>
@endsection
...
// LIVEWIRE COMPONENT
<div class="flex flex-col gap-4 w-full overflow-y-auto">
<div class="flex flex-col gap-1">
<label for="content">Message</label>
<div class="flex gap-4">
<input class="outline-none px-2 py-1 rounded border border-blue-700 w-full" type="text" wire:model="content" wire:keydown.enter="save">
<button class="block px-4 py-1 rounded border border-blue-700 bg-blue-700 text-white" wire:click="save">Envoyer</button>
</div>
</div>
@foreach ($messages as $message)
@if ($message->sender_id == auth()->id())
<div class="bg-blue-700 text-white rounded-xl px-4 py-2 self-end">
<div class="italic text-sm text-gray-300">{{ $message->sender->name }} le {{ $message->created_at }}</div>
{{ $message->content }}
</div>
@else
<div class="bg-blue-300 rounded-xl px-4 py-2 self-start">
<div class="italic text-sm text-gray-700">{{ $message->sender->name }} le {{ $message->created_at }}</div>
{{ $message->content }}
</div>
@endif
@endforeach
</div>
The two livewire components should have vertical scrolling, but it doesn't work.
I have tried several things without any success.
Can you guide me to the solution ?
Thanks ;).
V
Level 63
@webrobert Already tested, it doesn't work. Hum ... and I don't understand why min-h-screen and not max-y-screen, I want that each section has a max height limited inside the body.
If I add overflow-hidden to the <main> tag, the section height is limited inside the body, but then no scroll appears for the sections.
Level 51
@vincent15000 is this more what you're after?
1 like
Level 70
@vincent15000 Have you tried with overflow-y-scroll? You may give it a try also.
1 like
Level 63
@tisuchi Yes I already tried it.
Level 63
@webrobert Yes that's a bit more like what I want to do.
Just one thing is missing : the padding around the body. And also the fact that the tchat section has to be not the screen height but only the height left under the header, with respect of the padding in the body.
Level 51
@vincent15000, I hear you but I think I would use a modal. to display the chat. you could space it down from the top and make it match the page. with the added benefit of being able to have a chat window
anyway have go eat lunch...
Level 63
The solution is to add overflow-y-auto on every nested block content.
<main class="flex flex-col flex-grow overflow-hidden">
@yield('content')
</main>
...
@extends('layout')
@section('content')
<div class="flex gap-8 w-full overflow-y-auto">
...
<section class="flex bg-blue-100 p-4 rounded w-1/2">
@livewire('conversation-component')
</section>
</div>
@endsection
...
<div class="flex flex-col gap-4 w-full overflow-y-auto">
...
</div>
Please or to participate in this conversation.