CODEWITHSUNDEEP
ruby-on-railstextformathelper
Shpigford
Shpigford

Reputation: 25338

Rails: Keep simple_format from adding line breaks to lists?

Here's the input HTML:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

If I pass that through Rails' simple_format the output is:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

<p><ul>
<br />  <li>Item 1</li>
<br />  <li>Item 2</li>
<br />  <li>Item 3</li>
</ul></p>

<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Notice the <br />'s before each list item.

How can I get simple_format to not do that?

Ultimately what I want to do is add paragraph tags around content that isn't already wrapped in some sort of tag (ie. blockquote, ul, ol).

Upvotes: 5

Views: 1055

Answers (3)

Michael Taylor
Michael Taylor

Reputation: 121

I hit the same problem. Here's how to solve it!

Wrap the simple_format output in a div like this:

<div class="single-spacing">
  <%= simple_format @your_content %>          
</div>

Then add this to your CSS file:

.single-spacing {
  ul br {
    display: none;
  }
}

Or, when you actually want some br inside a list, you can add this CSS instead:

.single-spacing{
  ul li br:first-child, ol li br:first-child {
    display: none;
  }
}

I tried to add this as a class to the simple_format itself (which is an option), but it didn't work for some reason. Putting it in a DIV does.

Not sure why simple_format adds these extra
's to a simple list, but hey ho.

Michael

Upvotes: 7

Dima Melnik
Dima Melnik

Reputation: 884

You can try to disable sanitize param

simple_format html_input, {}, sanitize: false}

and it will work, but you should keep in mind there is no sanitize

Upvotes: 0

David Barlow
David Barlow

Reputation: 4974

As far as i'm aware, simple_format is designed to just work around line breaks '\n' (which are created when you press the enter key)

simple_format creates a <br /> for \n and <p> for \n\n

simple_format is not really designed to work with existing html input but more for text_area fields from databases and text strings etc.

see rails docs for examples: ActionView - simple_format

A couple of suggestions could be just wrap your entire input using content_tag:

    <%= content_tag :p, :class => "strong" do -%>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

      <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li>Item 3</li>
     </ul>

     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    <% end -%>

or maybe if possible format your html without linebreaks:

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  <ul> <li>Item 1 </li> <li>Item 2</li> <li>Item 3</li> </ul>

  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

These are both pretty hackish, the best solution would be to have all the input stored as html before it gets called to be displayed. But not knowing how your obtaining the input, it is hard to suggest a way to do that.

Upvotes: 0

Related Questions