sachin pal sachin pal - 1 year ago 72
HTML Question

Empty paragraph tags not displaying

Empty paragraph tags are not showing on the site. Below the is code I used.

<p class="text-center">&nbsp;</p>

I have also used just a P tag without the class. I thought maybe adding the class might make it visible. But did not work. If I enter text instead of non-breaking space it appears.

I have checked any other reasons. I only have JCE installed and validation and html cleanup is disabled.

BUT here the p tag is not getting cleaned. It still exists in the article. When I switch to code mode I can see the P tag. But it just does not show up in the front-end.
I used to firebug and the code is just missing.
I am using the code in between Short codes.

[/column] [/row]
<p class="text-center">&nbsp;</p>
[row] [column one-third]

As above as you can see after on of the rows end I want a single line space. So I am entering a P tag.
But on the front end it just does not show.
Here is how it appears:

<div> </div>
<div class="row">
<div class="column one-third">

I am on the verge of uploading my website and I just can't get a space between these two "row"(divs). I really have to focus on updating other parts of the website. The only option I seem to have is to add a transparent gif.

I can add an empty div. An empty div shows up but if I had an empty P tag (as shown above) in this empty div it does not display(Again the empty paragraph tag is showing with the class in the back-end, in the editor)
I am breaking by head now. I just can't find out what is removing the empty paragraph tag only when rendering the website in the front end.

Answer Source

Empty p tags are actually enemies with shortcodes i.e. an empty p tag between rokcandy shortcodes will make the shortcodes not to render. In that case we highly recommend using the
rather than the empty p tag;

All in all, if you must use it, you can open js/template.js find the following code and comment it out;

// remove empty p tags
$('p').each(function() {
    var $this = $(this);
    if($this.html().replace(/\s|&nbsp;/g, '').length === 0)