Jump to content
lele_ballack

Unexpected text position outside of <p>

Recommended Posts

There is something I can't figure out about about text fields and their position in the HTML code. 

There is a field which is a multi-language text area with CKEditor called "a_01_text". 

<p class="wow fadeInUp animated" data-wow-delay="1.3s"><?=$page->a_01_text?></p>

After filling the field with "Some text" through PW, the result in HTML code is totally different than what I expected as my text is actually outside of the designated <p>: 

<p class="wow fadeInUp  animated" data-wow-delay="1.3s" style="visibility: visible; animation-delay: 1.3s; animation-name: fadeInUp;"></p>
<p>Some text</p>

I was getting crazy trying to understand why my CSS rule wouldn't work on this text, until I realised this. It happens only with textareas, not with simple texts.

Can anyone please explain why this happens and how I can fix this? 

Share this post


Link to post
Share on other sites

If you view the page source (right-click + view page source, i.e. not the "formatted" version you see in dev tools), is that actually what you see there as well?

Since a_01_text is a CKEditor field it'll return markup, and in this case that markup probably consists of a paragraph (<p>Some text</p>). Since you can't have a paragraph inside a paragraph, your browser might be "correcting" it to this. How 'bout converting that wrapping <p> element into a <div> instead?

<div class="wow fadeInUp animated" data-wow-delay="1.3s"><?=$page->a_01_text?></div>

 

  • Like 1

Share this post


Link to post
Share on other sites

Thank you @teppoI think you nailed it! 

If I look into the page source, it happens exactly what you predicted as there is <p> inside my original <p>: 

<p class="wow fadeInUp animated" data-wow-delay="1.3s"><p>Some text</p></p>

I could use your solution replacing the original <p> into a <div>, but I'm wondering if there is another solution as I'm doing a quick job and using a template which means I'd have to change most of CSS around the whole website in this case.  Any other way of fixing this?

Share this post


Link to post
Share on other sites

@lele_ballackthe only fix would be to not use CKEditor for this field, as CKEditor will output Markup. Whenever you put CKEditor Markup inside a <p> Element you will get the same result. 

As a reminder: Whenever outputting CKEditor, use a proper div, article, aside element to wrap the output. 

 

Share this post


Link to post
Share on other sites

Thank you @LuisM! I think I'll remove the CKEditor where possible and play with CSS to render the rest of the elements in the same way. 

I'll definitely keep the reminder for the next projects! 😀

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...