The align of the laravel not properly cause by multiple embedded css and external css in one blade file

问题

I am using laravel as my framework, i am facing the problem which is i @extends a php into another php, it works fine. But i not sure why the layout will become strange when the page is loading finish.

This is my code

@extends('layouts.cal')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel</title>

    <!-- Fonts -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

    <!-- Styles -->
    {{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body {
            font-family: 'Lato';
        }

        .fa-btn {
            margin-right: 6px;
        }
    </style>
</head>
<body id="app-layout">
<nav class="navbar navbar-default">
    <div class="container">
        <div class="navbar-header">

            <!-- Collapsed Hamburger -->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#spark-navbar-collapse">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <!-- Branding Image -->
            <a class="navbar-brand" href="{{ url('/') }}">
                Laravel
            </a>
        </div>

        <div class="collapse navbar-collapse" id="spark-navbar-collapse">
            <!-- Left Side Of Navbar -->
            <ul class="nav navbar-nav">
                <li><a href="{{ url('/') }}">Home</a></li>
            </ul>

            <!-- Right Side Of Navbar -->
            <ul class="nav navbar-nav navbar-right">
                <!-- Authentication Links -->
                @if (Auth::guest())
                    <li><a href="{{ url('/login') }}">Login</a></li>
                    <li><a href="{{ url('/register') }}">Register</a></li>
                @else
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
                        </ul>
                    </li>
                    @section('content1')
                        <div id="calendar"></div>
                        @endsection
                @endif
            </ul>
        </div>
    </div>
</nav>

@yield('content')

        <!-- JavaScripts -->
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

My cal.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

    <!-- Styles -->
    {{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    {{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}
    <link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    {{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}
    <script src='js/lib/moment.min.js'></script>
    <script src='js/lib/jquery.min.js'></script>
    <script src='js/fullcalendar.min.js'></script>
    <script>

        $(document).ready(function() {

            $('#calendar').fullCalendar({
                theme: true,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                dayClick: function(date, allDay, jsEvent, view) {
                    $("#eventdata").show();
                    $("#eventdata").load("/events/add/"+allDay+"/"+$.fullCalendar.formatRange( date, 'dd/MM/yyyy/HH/mm'));
                },

            });

        });

    </script>
    <style>

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

    </style>
</head>
<body>


@yield('content1')


</body>
</html>

What i added is

@extends('layouts.cal')

And in the if else statement, i add

@section('content1')
 <div id="calendar"></div>
@endsection

The function works fine, i just cant find out what is the problem why the layout will change when the page is loading finish.

I tried this method.

@extends('layouts.cal')
@section('content')
//my code here
@if (Auth::guest())
                    <li><a href="{{ url('/login') }}">Login</a></li>
                    <li><a href="{{ url('/register') }}">Register</a></li>
                @else
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
                        </ul>
                    </li>
                    @section('content1')
                        <div id="calendar"></div>
                        @endsection
                @endif


@endsection

It is still works, but the problem is the navigation bar of the page will be disappear when the user is not login.

After modified the cal.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

    <!-- Styles -->
    {{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    {{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}
    <link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    {{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}

    <style>

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

    </style>
</head>
<body>
<script src='js/lib/moment.min.js'></script>
<script src='js/lib/jquery.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script>

    $(document).ready(function() {

        $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            dayClick: function(date, allDay, jsEvent, view) {
                $("#eventdata").show();
                $("#eventdata").load("/events/add/"+allDay+"/"+$.fullCalendar.formatRange( date, 'dd/MM/yyyy/HH/mm'));
            },

        });

    });

</script>

@yield('main_add_js')


</body>
</html>

回答1:

Always start your HTML with your first blade template. Your first blade template is cal.blade.php. So start your HTML and body tag on that file.

Your all essential CSS files should be included in this file.

For eg:-

Your cal.blade.php file should be

<html>
<head>
    // Add all your essential CSS files here.
 @yield('manual_add_css_section')
    // This yield section isoptional for you
</head>

<body>

 @yield('main_content_section')
  // This is the main content section. 2nd blade file will use this section. In your case you are using for displaying calender.    

   // Include all your required Js Files here just above `</body>` tag.

 @yield('manual_add_js_section')
   // This yield section is optional for you to use script tag. It will load at the end.
</body>
</html>

cal.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

    <!-- Styles -->
    {{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    {{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}
    <link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    {{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}

    <style>

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;@section('content')
        }

    </style>
</head>
<body>



@yield('content')

@if (Auth::user())
<div id="calendar"></div>
@endif

<script src='js/lib/moment.min.js'></script>
<script src='js/lib/jquery.min.js'></script>
<script src='js/fullcalendar.min.js'></script>

<script>
    $(document).ready(function() {
      // Check calender div is exist or not. 
      // In case of guest user it will not present
      if($("#calendar").length ){
        $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            dayClick: function(date, allDay, jsEvent, view) {
                $("#eventdata").show();
                $("#eventdata").load("/events/add/"+allDay+"/"+$.fullCalendar.formatRange( date, 'dd/MM/yyyy/HH/mm'));
            },

        });
       }

    });
</script>


</body>
</html>

I have not make too much changes here. I have added this lines to body section.

@if (Auth::user())
<div id="calendar"></div>
@endif

app.blade.php

@extends('layouts.cal')
@section('content')

                @if (Auth::guest())
                    <li><a href="{{ url('/login') }}">Login</a></li>
                    <li><a href="{{ url('/register') }}">Register</a></li>
                @else
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
                        </ul>
                    </li>

                @endif


@endsection

I have removed @section('content1') from this file because there is no need to use it here. I have taken that section into carl.blade.php file. Perhaps you can use it anywhere you want.

Hope this will work for you .

All the best. :)

回答2:

I think you are override the bootstrap css ad, pass the css you need for the fullcalendar into the master layout file. This will works, hope this can help.

  <style>

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

    </style>

So this will no produce the conflict.

来源：https://stackoverflow.com/questions/34594226/the-align-of-the-laravel-not-properly-cause-by-multiple-embedded-css-and-externa

标签

php

laravel

layout

blade