Level 51
Did you compile the assets? npm run dev or npm run build. Are you using guest layout in the login page like this ?
<x-guest-layout>
</x-guest-layout>
Mar 8, 2024
1
Level 1
My Login page in not loading the CSS properly.
My input fields are big while they are not supposed to be big. I installed all the applications to run the necessary libraries and run them as well. I used the Laravel 10 starter kits (Breeze) for the authentication.
This is my view
<!-- Session Status -->
<x-auth-session-status class="mb-4" :status="session('status')" />
<form method="POST" action="{{ route('login') }}">
@csrf
<!-- Email Address -->
<div>
<x-input-label for="email" :value="__('Email')" />
<x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
<x-input-error :messages="$errors->get('email')" class="mt-2" />
</div>
<!-- Password -->
<div class="mt-4">
<x-input-label for="password" :value="__('Password')" />
<x-text-input id="password" class="block mt-1 w-full"
type="password"
name="password"
required autocomplete="current-password" />
<x-input-error :messages="$errors->get('password')" class="mt-2" />
</div>
<!-- Remember Me -->
<div class="block mt-4">
<label for="remember_me" class="inline-flex items-center">
<input id="remember_me" type="checkbox" class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="remember">
<span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
</label>
</div>
<div class="flex items-center justify-end mt-4">
@if (Route::has('password.request'))
<a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="{{ route('password.request') }}">
{{ __('Forgot your password?') }}
</a>
@endif
<x-primary-button class="ms-3">
{{ __('Log in') }}
</x-primary-button>
</div>
</form>
</x-guest-layout>
this is my guest layout
<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="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans text-gray-900 antialiased">
<div class="bg-white shadow-md" x-data="{ isOpen: false }">
<nav class="container px-6 py-8 mx-auto md:flex md:justify-between md:items-center">
<div class="flex items-center justify-between">
<a class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500 md:text-2xl hover:text-green-400"
href="#">
OFF-CAMPUS-RESERVATION-SYSTEM
</a>
<!-- Mobile menu button -->
<div @click="isOpen = !isOpen" class="flex md:hidden">
<button type="button"
class="text-gray-800 hover:text-gray-400 focus:outline-none focus:text-gray-400"
aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
<path fill-rule="evenodd"
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z">
</path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div :class="isOpen ? 'flex' : 'hidden'"
class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0">
<a class="text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500 hover:text-green-400"
href="{{ route('welcome') }}">Home</a>
</div>
</nav>
</div>
<div class="font-sans text-gray-900 antialiased min-h-screen">
{{ $slot }}
</div>
<footer class="bg-gray-800 border-t border-gray-200">
<div class="container flex flex-wrap items-center justify-center px-4 py-8 mx-auto lg:justify-between">
<div class="flex flex-wrap justify-center">
<ul class="flex items-center space-x-4 text-white">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Terms</li>
</ul>
</div>
<div class="flex justify-center mt-4 lg:mt-0">
<a>
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-6 h-6 text-blue-600" viewBox="0 0 24 24">
<path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
</svg>
</a>
<a class="ml-3">
<svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
class="w-6 h-6 text-blue-300" viewBox="0 0 24 24">
<path
d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
</path>
</svg>
</a>
<a class="ml-3">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" class="w-6 h-6 text-pink-400" viewBox="0 0 24 24">
<rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
<path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
</svg>
</a>
<a class="ml-3">
<svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
stroke-width="0" class="w-6 h-6 text-blue-500" viewBox="0 0 24 24">
<path stroke="none"
d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z">
</path>
<circle cx="4" cy="4" r="2" stroke="none"></circle>
</svg>
</a>
</div>
</div>
</footer>
</body>
</html>```
this my component (text-input.blade.php) for the input field
@props(['disabled' => false])
<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm']) !!}>
how can i solve this
Please or to participate in this conversation.