Laravel 5 Pagination CSS Breaking - php

Question

I'm using Laravel 5 and Bootstrap 3.3.4
So I have the following code in my controller:
$articles = Newsarticles::paginate(10);
return view ('news',compact('articles');
Then in my view I have:
#foreach($articles as $article)
<article>
<h2>
{!! $article->headline !!}
</h2>
<div class="body">
{!! substr($article->article,0,500) !!}
</div>
</article>
#endforeach
{!! $articles->render() !!}
When I run this, the pagination links at the bottom of the page come out just fine and look as they should do. However, if I change the controller to :
$articles = Newsarticles::orderBy('artdate','DESC')->paginate(10);
my pagination links come out like this:
«
1
2
3
4
5
6
»
How can one small adjustment in the code break the css?

Answer 1

Hadn't escaped tags and an open HTML tag was killing off the css. Thanks to #minioz for pointing it out

Answer 2

From my comment above.
The problem was the broken html tag. It is because of using substr() at this line.
{!! substr($article->article,0,500) !!}
The function will cut out part of the $article->article and left some tags open.
To solve to problem you need to remove tags before do substr()
{!! substr(strip_tags($article->article),0,500) !!}

Answer 3

With substr($article->article,0,500) you may breack html code.
You can also have a distinct number of vivible chars
p>hello</p>
12 chars
<stong>hello</strong>
21 chars.
And take care of this:
echo substring('<p>hello</p>', 5);
Writes: "he". Breack html result.
Try with
substr(strip_tags($article->article,0,500))
to strip all html tabs before cut the string. This will not breack your current html and you will get the correct chars length.

Answer 4

Not enough information to answer -- but the three big possibilities are
Somehow you're rendering different HTML in each example
Other CSS you have on the page isn't bullet-proof, and it's creating different container wraps based on headline and content length
There's HTML content in $article->article, $article->slug, or $article->headline with unclosed tags that's breaking the layout (or unexpected tags/styles/classes that interfere with the page CSS)
Make a copy of the raw page source (View -> Developer -> View Source in Chrome) of the page for the different requests and then run through through a diff program (CLI diff, WinMerge, opendiff, etc.) to spot any rendering differences.
Assuming there's none, investigate each but of content area for broken tags, and then start populating your layout with different length headlines and text body area until you trigger the issue, and then fix your CSS from there.
Good luck!