CODEWITHSUNDEEP
csslaravelbootstrap-4
Jacey
Jacey

Reputation: 679

Laravel path causing problems with padding

Running into a problem with my Laravel app. When my path is only one level deep, everything looks fine. If the path is two levels deep, my padding-top goes away.

/edit displays just fine

/profile/edit is messed up

These are both the same page, just different routes:

Route::get('/edit', 'HomeController@edit')->name('edit');
Route::get('/profile/edit', 'HomeController@edit');

public function edit()
    {
        $user = Auth::user();
        
        $tab = 'profile';
        
        return view('home.editprofile', compact('user', 'tab'));
    }

My CSS includes padding-top: 60px so the fixed navbar doesn't cover my MAIN element. I accomplished the same thing by placing the padding in the BODY.

This is becoming a problem because /password/reset is already getting cut off at the top and I forsee it being a huge problem as my app grows and I need to show /users/266 or whatever.

I've built an entire other Laravel app and it doesn't have this problem.

app.blade.php

<!doctype html>
<html lang="en">
    @include('layouts.head')
  <body>
    <div id="app">
        @include('layouts.nav')

        <main>
            @yield('content')
        </main>
    </div>
    @include('layouts.footer')
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
            $('[data-toggle="tooltip"]').tooltip(); 
        });
    </script>
    <script>
        $('#waiverModal').on('shown.bs.modal', function () {
            $('#myInput').trigger('focus')
        })
    </script>
  </body>
</html>

head.blade.php

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <!-- Icon -->
    <link rel="shortcut icon" href="images/favicon.ico">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/custom.css">

    <title>@yield('title', 'NMSC')</title>
</head>

nav.blade.php

<nav class="navbar navbar-expand-md navbar-light bg-white navbar-laravel fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="{{ url('/') }}">
            <img src="/images/logo.png" width="150" height="59" alt="NMSC Logo">        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <!-- Left Side Of Navbar -->
            <ul class="navbar-nav mr-auto">

            </ul>

            <!-- Right Side Of Navbar -->
            <ul class="navbar-nav ml-auto">
                <!-- Authentication Links -->
                @guest
                    <li class="nav-item">
                        <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                    </li>
                    @if (Route::has('register'))
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                        </li>
                    @endif
                @else
                    <li class="nav-item dropdown">
                        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="{{ route('home') }}">My Dashboard</a>
                            <a class="dropdown-item" href="{{ route('logout') }}"
                               onclick="event.preventDefault();
                                             document.getElementById('logout-form').submit();">
                                {{ __('Log Out') }}
                            </a>

                            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                @csrf
                            </form>
                        </div>
                    </li>
                @endguest
                <li class="nav-item">
                    <a href="#" class="nav-link" title="Find us on Facebook"><i class="fab fa-facebook-square fa-lg"></i></a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" title="Follow us on Twitter"><i class="fab fa-twitter-square fa-lg"></i></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

editprofile.blade.php

@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-3">
            @include('layouts.usernav')
        </div>
        <div class="col-6">
                <div class="card">
                    <div class="card-header">Profile - {{ Auth::user()->name }}</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="card border-0 mb-3">
                                    <img class="card-img-top"
                                        @if (strpos($user->photo, 'https://') !==false)
                                            src="{{ $client->logo }}" 
                                            alt="User Photo"
                                        @elseif ($user->photo)
                                            src="/storage/user_images/{{ $user->photo }}" 
                                            alt="User Photo"
                                        @else
                                            src="/images/no-photo.png" 
                                            alt="No Photo"
                                        @endif
                                    >
                                </div>
                            </div>
                            <div class="col-lg-9">
                                <form>
                                    <div class="form-group">
                                        <label for="name">Name</label>
                                        @if (old('name'))
                                            <input type="text" name="name" id="name" class="form-control" autocomplete="off" value="{{ old('name') }}">
                                        @else
                                            <input type="text" name="name" id="name" class="form-control" autocomplete="off" value="{{ $user->name }}">
                                        @endif
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputPassword1">Password</label>
                                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                    </div>
                                    <div class="form-group form-check">
                                        <input type="checkbox" class="form-check-input" id="exampleCheck1">
                                        <label class="form-check-label" for="exampleCheck1">Check me out</label>
                                    </div>
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>
@endsection

You can see the difference between /login and /password/reset, two views I did not build:

login.blade.php

reset.blade.php

Help?

Upvotes: 0

Views: 1325

Answers (1)

ceejayoz
ceejayoz

Reputation: 180065

<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/custom.css">

These URLs are relative, so if you're in /edit/foo they'll try to go to /edit/css/custom.css, which doesn't exist.

You need to make these absolute:

<link rel="shortcut icon" href="/images/favicon.ico">
<link rel="stylesheet" href="/css/custom.css">

or better yet, run them through the url or asset helpers:

<link rel="shortcut icon" href="{{ asset('images/favicon.ico') }}">
<link rel="stylesheet" href="{{ asset('css/custom.css') }}">

Upvotes: 4

Related Questions