Twitter bootstrap "lead" not working with simple_form

0
votes

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>
1
ruby-on-railstwitter-bootstrapsimple-form
When you installed simple_form, did you pass in the --bootstrap option? rails generate simple_form:install --bootstrap – platforms
Yes I did. I've tried bouncing the web server but no difference. – shutdown_r_now
Would the enclosed classes like 'controls' be overriding the bootstrap class? – shutdown_r_now

1 Answers

1
votes

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.