<div style="margin-top:-21px">
#include('partials.header')
</div>
<div style="margin-top:-21px">
#include('partials.navig')
</div>
<div style="margin-top:0px">
#include('partials.footer')
</div>
Above HTML/Laravel code inserts partials into layout. Every time when I use partial, it will insert empty spaces into HTML output and causing ugly white-space (empty row) above the partial. That's why I am using margin:top:-21px, to hide empty row . But the problem is, that in Internet Explorer are not those white-spaces visible and therefore partials are shifted too much. Here is an HTML output and how empty row looks like:
I have no clue what can cause these white-spaces, it is not wrong margin of elements or something like that. Is there any solution or explanation for this?
I found solution:
Problem was in encoding. Change from UTF-8 to UTF-8 w/o DOM made it.
Alternate solution is wrap partial into div with line-height:0 and div in partials set back to line-height:1.
This is because you are including partials in new row. Try including them in same row and it should fix your problem.
<div style="margin-top:-21px">#include('partials.header')</div>
Laravel doesn't insert blank lines. You should look at your partial files and make sure there are no blank lines / empty spaces at the beginning and at the end. You should also consider including those partials right after closing div and not in next line.
For example:
<div style="margin-top:-21px">#include('partials.header')</div>
<div style="margin-top:-21px">#include('partials.navig')</div>
<div style="margin-top:0px">#include('partials.footer')</div>
And when you put in those partials only the name of file, you will get the following output:
<div style="margin-top:-21px">header</div>
<div style="margin-top:-21px">navig</div>
<div style="margin-top:0px">footer</div>
As you see - no spaces, no blank lines.
Of course the trick with negative margin is the very wrong solutions, so you should analyze your partials and also change including those files to the method I showed here.
Related
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?
Hadn't escaped tags and an open HTML tag was killing off the css. Thanks to #minioz for pointing it out
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) !!}
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.
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!
I am using preg_replace to replace HTML comment tags with empty space but it seems to be replacing the whole HTML comment with empty space.
echo preg_replace('/<!--(.*?)-->/','',$r->pageCont);
Where $r->pageCont is a database entry containing HTML, for example:
<div class="col-lg-12">
<p>The year is:</p>
<!-- <?php echo date(Y); ?> -->
</div>
In the above example, the HTML comment tags would be stripped away leaving only the PHP code to echo the year. Like I said, what is happening is the entire HTML comment is being stripped away.
Can someone recommend a pattern to use? Would appreciate your input.
EDIT: updated question to reflect the code I am using.
It seems like you're trying to replace the comment line with the php code present inside that. If yes, then you need to put the replacement string as $1 so that it would refer to the group index 1.
echo preg_replace('/<!--(.*?)-->/', '$1', $r->pageCont);
DEMO
I created a custom index.php for a wordpress theme. I just renamed the .html to .php file. Everything seems to work fine except there are extra characters printed if I run the page.
These characters are printed at start of the body area in the browser : " --> "
I am confused as to from where these characters are printed. I can create a .php with complete html contents right? Or do I need to do some modification.
<!--this is a HTML comment line -->
If you forget to delete last --> characters after deleting the first part, you might be seeing that. We cannot know without seeing your code.
As answer to the last question, you can mix php and plain HTML. Whenever you are writing php your code must be within
<?php ... CODE HERE ... ?>
Inline php however is not a good programming pattern in my opinion.
I'm using php as templating engine, and I've noticed that when I include view file, empty text node is added before content of that view.
For example, I have html file I want to include that has following content:
<p>Some text</p>
than I include that file like this:
<div><?php require_once('file/path.htm'); ?></div>
(notice that I've removed any spaces between div and php) And after php includes file he adds empty text node (which I'll mark like this "") that adds space before p tag, so I get something like this:
Some previous content...
<div>
"" //empty text node
<p>Some text</p>
</div>
This is quite problematic since it ruins content composition. Is there any solution to this?
FSou1 has it right, it's the charset, it can also be solved by saving as UTF-8 without BOM:
Open your PHP inlcude file in Notepad++ (download here: http://notepad-plus-plus.org/)
Select Encoding --> Encode in UTF-8 without BOM
Empty nodes disappear. Hope that helps someone. This was driving me crazy.
I had the same problem right now, and i had a luck when find answer. There answer is in charset. It could be strange, but when you save your file in UTF-8, you have empty in your markup. When your file in cp1251, you dont have this problem.
This was my second issue caused by BOM (both took over an hour of debugging, Googling and hairpulling).
I just found this (windows-only) small drag and drop program that check for BOM which it can remove:
File BOM Detector by Brynt Younce
Softpedia.com/get/System/File-Management/File-BOM-Detector.shtml
Small, easy and simple. There seems to by a PHP solution for all platforms bu I have not tested it.
Take a look if interested:
Github.com/emrahgunduz/BomCleaner
First I'll show you a sample of the code I'm working with:
<div class="entry">
<p>Any HTML content could go here!</p>
</div>
</div><!--/post -->
Normally I'd use a regex rule such as the following to look for a prefix and a suffix and grab everything in between:
(?<=<div class="entry">).*(?=</div><!--/post -->)
However, that doesnt appear to be working as it seems to be pulling the white space in between then following parts instead of the HTML content itself:
<div class="entry">
<p>
Any help/suggestions would be much appreciated as I've been bashing my head with this one for a good few hours now.
Many thanks in advance.
Don't use Regex to parse HTML. You need an Xml Parser or similar.
Search Stackoverflow for the best one, like so: Robust and Mature HTML Parser for PHP
You can also consider php strip_tags().