0

I'm using Twitter Bootstrap along with simple_form in Rails. For some reason I cannot get the Bootstrap class="lead" to function. I see in the rendered HTML some additional classes which I assume come from simple_form. How can I get the two to play together?

This is my code:

<p class="lead">
  <%= sentence.input :dialog, :input_html => { :class => "span8" },
              :placeholder => "Enter your sentence here", :label => false %>              
</p>

And this is the rendered HTML:

<p class="lead">
  <div class="control-group string optional">
  <div class="controls"><input class="string optional span8" id="dialog_catagory_dialogs_attributes_0_dialog" name="dialog_catagory[dialogs_attributes][0][dialog]" placeholder="Enter your sentence here" size="50" type="text" />
 </div>
 </div>
</p>

EDIT I've tried various options, including using the rendered HTML, like this and removing the divs. Still not working.

<p class="lead">
  <input class="string optional span8" id="dialog_catagory_dialogs_attributes_0_dialog" name="dialog_catagory[dialogs_attributes][0][dialog]" placeholder="Enter your sentence here 2" size="50" type="text" />
</p>

output

<p class="lead">
   <input id="dialog_catagory_dialogs_attributes_0_dialog" name="dialog_catagory[dialogs_attributes][0][dialog]" size="30" type="text" />
</p>
port5432
  • 5,889
  • 10
  • 60
  • 97

1 Answers1

1

Here's the problem: Placing a div inside of a p element implicitly closes the p tag in standards-confirming browsers. ( Reference )

You can see (and modify locally, if you wish) the behavior of Simple Form's Bootstrap generators in this file on Github.

Community
  • 1
  • 1
platforms
  • 2,666
  • 1
  • 18
  • 23
  • Hey thanks for your answer. So to use a different class I would need to modify the simple form source? eg: ba.use :foobar, :wrap_with => { :tag => 'p', :class => 'lead' } ? – port5432 Nov 12 '12 at 21:59
  • Sure - or use the [deface gem](https://github.com/railsdog/deface) to filter the output. But the easiest thing would be to not use the form helper. Just hard-code exactly what you want, nested just as you want it. You can use the output of the form helper as-is as a starting point. – platforms Nov 12 '12 at 22:04
  • The hard-coding sounds like the solution, but I'm not sure exactly how to do it. – port5432 Nov 12 '12 at 22:07
  • Actually, you already have, haha. Start with the second snippet of your original post - the rendered HTML. That's the output of the form helper. – platforms Nov 12 '12 at 22:13