CODEWITHSUNDEEP
phplaravellaravel-5.4
Israel Pinheiro
Israel Pinheiro

Reputation: 95

@yield placed at wrong place

I'm new to Laravel, and I'm trying to do a "modular" page for the first time. Everything was going fine, had my base layouts, which gets extended on my home page, have set up some sections/yields with no problem (content, title, etc) but one specific @yield keeps being rendered at the wrong place, I've put it inside my head file (head.blade.php), which already have another @yield for the title, but that one keeps getting rendered inside the body. I tried doing some tests, and discovered that if I put my title @yield inside <title></title> it works OK, but if I put it outside the tag it is moved to the body. Thats a normal Laravel way of working (@yield can't be by itself, only inside a tag) or something is wrong ?

default.blade.php

<!doctype html>
<html>
    <head>
        @include('includes.head')
    </head>
    <body>
        <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-desktop-drawer-button">
            @include('includes.nav')
            @yield('tools')
            <main class="mdl-layout__content">
                <div class="page-content">
                    @yield('content')
                </div>
            </main>
            @include('includes.footer')
        </div>
    </body>
</html>

head.blade.php

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="cache-control" content="no-cache">
<meta name="description" content="XXXXXX">
<meta name="author" content="XXXXXXXXXXXXX">
<title>@yield('title')</title>  =====> Works normally if put here
@yield('title') =====> Rendered inside the body if put that way
<!-- jQuery 3.2.1 -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!-- Normalize CSS -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- Dialog Polyfill -->
<link rel="stylesheet" type="text/css" href="css/dialog-polyfill.css">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Upvotes: 0

Views: 685

Answers (1)

Sergey
Sergey

Reputation: 7692

It's a normal browser behaviour. First of all you have to place all the things inside the right places. It's like you are trying eat some fat meat without fork and then crying that your hands in fat :) You always have to define all tags that browsers expect. Title tag define that inside title of the page is located. yield('title') just means the name that you gave its for inserting there then. It looks like id in HTML. Since you haven't described to browser what do you want to insert here it is trying to solve the problem and it's usually a placement all the things without needed tags in body (only if we are talking about omitting tags in the header).

Upvotes: 1

Related Questions