It's not a Livewire problem, but a simple HTML one.
This div => <div class="main-wrapper"> is not closed.
Tip => you should give explicit titles to your posts, not just set the title to "I need help".
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
the first section of my template is truncated. How to make it appear? Thank you for your help
<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
//use App\Livewire\Components\CreatePost;
class Home extends Component
{
public function render()
{
$user = Auth::user();
return view('livewire.home',['user'=>$user)->extends('layouts.app');
}
}
App.blade.php
<!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>
<link rel="stylesheet" href="{{asset('css/themify-icons.css')}}">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="{{asset('images/favicon.png')}}">
<!-- Custom Stylesheet -->
<link rel="stylesheet" href="{{asset('css/style.css')}}">
<link rel="stylesheet" href="{{asset('css/emoji.css')}}">
<link rel="stylesheet" href="{{asset('css/video-player.css')}}">
<link rel="stylesheet" href="{{asset('css/lightbox.css')}}">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
@livewireStyles
</head>
<body class="color-theme-blue mont-font">
<div class="preloader"></div>
<div class="main-wrapper">
<!-- navigation top-->
@include('layouts.navigation')
<!-- navigation top -->
<!-- navigation left -->
@include('layouts.left-navigation')
<!-- navigation left -->
<!-- main content -->
<!-- main content -->
<main >
<div wire:snapshot='{"data":[],"memo":{"id":"QzHvK0sy2QZsyKerN2ZA","name":"home","path":"\/","method":"GET","children":{"lw-2780475762-0":["form","qaEyR6fTj5n1IpaitUq4"]},"scripts":[],"assets":[],"errors":[],"locale":"en"},"checksum":"5a0addeb7548fce8ea2a6ef328a01f259d2c0216f818f1ad90d72f520b2cbd12"}'>
<div> Not Display Section </div> //not good
<div> Display Section </div>//good
<div> Display Section </div>//good
Display
</div>//good
</main>
<script src="{{asset('js/plugin.js')}}"></script>
<script src="{{asset('js/video-player.js')}}"></script>
<script src="js/lightbox.js"></script>
<script src="js/scripts.js"></script>
<script src="js/twemoji.min.js"></script>
<script src="js/toastr.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script >
window.addEventListener('ALERT',event => {
toastr[event.detail.type](event.detail.message,event.detail.title ??''),
toastr.options = {
"closeButton" : true,
"progressBar":true,
}
});
</script>
@livewireScripts
</body>
</html>
@stack('scripts')
Please or to participate in this conversation.