Akosiyuyi's avatar

Page layout may be unexpected due to Quirks Mode

Using Laravel 12 + React in Inertia Hello everyone, please help me i can't find where i go wrong, btw beginner here I have a single page (BulkUploader.jsx) template that cant show when i try to navigate it via link and when i open it in new tab its only white, my other page templates works but only this one doesnt so I think its not the lack of Doctype that causes it.

Here are my src if it helps:

web.php

use App\Http\Controllers\Admin\DashboardController; use App\Http\Controllers\Admin\StudentController; use App\Http\Controllers\Admin\BulkUploadController; use App\Http\Controllers\ProfileController; use Illuminate\Foundation\Application; use Illuminate\Support\Facades\Route; use Inertia\Inertia; use App\Http\Controllers\VoterController;

Route::redirect('/', '/login');

Route::prefix('admin')->name('admin.')->middleware(['auth', 'verified', 'role:admin'])->group(function () { Route::get('/dashboard', [DashboardController::class, 'dashboard'])->name('dashboard'); Route::resource('students', StudentController::class);

// Bulk upload route
Route::get('students/bulk-upload', [BulkUploadController::class, 'index'])
    ->name('students.bulk-upload');

});

Route::middleware(['auth', 'verified', 'role:voter'])->group(function () { Route::get('/voter/dashboard', [VoterController::class, 'dashboard'])->name('voter.dashboard');

});

Route::middleware('auth')->group(function () { Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit'); Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update'); Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy'); });

require DIR . '/auth.php';

BulkUploader.jsx

import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import { Head } from '@inertiajs/react';

export default function BulkUploader() { return ( <AuthenticatedLayout header={ <h2 className="text-xl font-semibold leading-tight text-gray-800 dark:text-white"> Bulk Uploader } > <Head title="Students" />

        <div className="">
            <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
                <div className="overflow-hidden bg-white dark:bg-gray-800 shadow-sm sm:rounded-lg">
                    <div className="p-6 text-gray-900 dark:text-white">
                        Bulk
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
);

}

BulkUploadController.php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request; use Inertia\Inertia; use App\Http\Controllers\Controller;

class BulkUploadController extends Controller { public function index() { return Inertia::render("Admin/Students/BulkUploader"); } }

0 likes
5 replies
Tray2's avatar

Add

<!doctype html>

On the top of your view.

Akosiyuyi's avatar

@Tray2 i already have that to my app.blade.php

here is the src

    <title inertia>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    <!-- Scripts -->
    @routes
    @viteReactRefresh
    @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
    @inertiaHead
</head>
<body class="font-sans antialiased">
    @inertia
</body>
Akosiyuyi's avatar

@Tray2 generated html where? Btw if it helps, i just copied a working page template and edited it, it has same structure so I cant comprehend why does it not work and other page templates is working

Tray2's avatar

@Akosiyuyi If you google Quirks Mode you get this information.

Quirks mode is a browser compatibility mode that causes a browser to render a web page with older, non-standard behavior to support legacy websites, rather than strictly adhering to current web standards. This mode is typically triggered by the absence or incompleteness of a proper DOCTYPE declaration, leading to inconsistent rendering and potential layout issues as browsers emulate the behavior of older versions of Internet Explorer or Netscape Navigator. Developers generally avoid quirks mode by including a complete DOCTYPE declaration to ensure standard-compliant rendering. What it is: A fallback rendering mode that browsers use to ensure backwards compatibility with older web pages. It instructs the browser to behave like older, non-standard versions of browsers, such as Internet Explorer 5. Why it exists: To prevent old websites from breaking when viewed in newer browsers that enforce modern web standards. What triggers it: The absence of a correct DOCTYPE declaration at the beginning of the HTML document. An incomplete or malformed DOCTYPE declaration. Consequences: Inconsistent Rendering: The page may display differently in different browsers, leading to unexpected layout problems. Non-Standard Behavior: Browsers may ignore modern CSS standards and apply older, non-standard rules, such as different default styles for images. How to avoid it (Standards Mode): Use a complete DOCTYPE: Place a complete and valid DOCTYPE declaration, such as , at the very beginning of your HTML file. Modern Browser Modes: Modern browsers now have different rendering modes, including quirks mode, limited-quirks mode, and no-quirks mode (also known as standards mode). No-quirks mode is the recommended state, where the browser strictly follows web standards.

That means that you don't have a doctype tag in the rendered html.

This

   <title inertia>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    <!-- Scripts -->
    @routes
    @viteReactRefresh
    @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
    @inertiaHead
</head>
<body class="font-sans antialiased">
    @inertia
</body>

Should look like this

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title inertia>{{ config('app.name', 'Laravel') }}</title>
     <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    <!-- Scripts -->
    @routes
    @viteReactRefresh
    @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"])
    @inertiaHead
</head>
<body class="font-sans antialiased">
@inertia

</body>
</html>

Please or to participate in this conversation.