lundi 19 août 2019

Why did laravel wrap my sidebar in an em tag?

**Using Laravel 5.8.31 & Bootstrap 4. Browser: Chrome v. 76.0.3 and Opera 62.0.33 **

I was testing my CRUD functions by deleting a post. After deletion, the controller redirects back to my post index page. When the page loaded, the bootstrap side bar wrapped down below the other posts, rather than being on the right. Was fine before the post deletion.

I tried altering the cols and floating elements to no avail. Using Chrome dev tools, I see that the sidebar is nested in an em tag that isn't in the code. Tried clearing application cache. No effect.

I suspect this has something to do with the blade templating language and parsing the html, although if it is, I have no idea how to fix this other than manually installing the sidebar on every page.

How do I fix this??

Code can be found here: https://github.com/gkennedy87/Hillcrest/tree/master/resources/views

(It seems that laravel is also wrapping the footer in an em tag. Although this is a non-issue at the moment)

// views/posts/index.blade.php
@extends('layouts.app')
      @section('content')
      @include('inc.navbar')

        <div class="container">
          <div class="row">

             <div class="col-md-8 col-lg-8">
               <h1>Our Blog</h1>
               @if (count($posts) > 0)
                 @foreach ($posts as $post)
                   <div class="card mb-4">
                     <img class="card-img-top" src="http://placehold.it/750x300" alt="Card image cap">
                     <div class="card-body">
                       <h2 class="card-title"><a href="/posts/"></a></h2>
                       <p class="card-text">{!! str_limit($post->body,200,'...')!!}</p>
                       <a href="/posts/" class="btn btn-primary">Read More &rarr;</a>
                     </div>
                     <div class="card-footer text-muted">
                       Posted on  by
                       <a href="#">Start Bootstrap</a>
                     </div>
                  </div>
                @endforeach
             
             @else
             <p>No Posts Found</p>
           @endif
         </div>
       @include('inc.sidebar')

    <!--end row -->
</div>
    <!--end container -->
</div>
@include('inc.footer')
@endsection


// views/inc/sidebar.blade.php

<!--sidebar start -->
    <div class="col-md-4 col-lg-4">
        <div class="sticky">
            <!-- Search Widget -->
            <div class="card my-4">
              <h5 class="card-header">Search</h5>
              <div class="card-body">
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search for...">
                  <span class="input-group-btn">
                    <button class="btn btn-secondary" type="button">Go!</button>
                  </span>
                </div>
              </div>
            </div>

            <!-- Categories Widget -->
            <div class="card my-4">
              <h5 class="card-header">Categories</h5>
              <div class="card-body">
                <div class="row">
                  <div class="col-lg-6">
                    <ul class="list-unstyled mb-0">
                      <li>
                        <a href="#">Web Design</a>
                      </li>
                      <li>
                        <a href="#">HTML</a>
                      </li>
                      <li>
                        <a href="#">Freebies</a>
                      </li>
                    </ul>
                  </div>
                  <div class="col-lg-6">
                    <ul class="list-unstyled mb-0">
                      <li>
                        <a href="#">JavaScript</a>
                      </li>
                      <li>
                        <a href="#">CSS</a>
                      </li>
                      <li>
                        <a href="#">Tutorials</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>

            <!-- Side Widget -->
            <div class="card my-4">
              <h5 class="card-header">Side Widget</h5>
              <div class="card-body">
                You can put anything you want inside of these side widgets. They are easy to use, and feature the new Bootstrap 4 card containers!
              </div>
            </div>

            </div>
            </div>

        <!-- sidebar end -->



from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2KHRMve
via IFTTT

Aucun commentaire:

Enregistrer un commentaire