Question

When I use wrapper_tag in simple_form, it works fine in development mode, but, when I deploy the application to heroku, the rendered result is different.

I use the wrapper_tag like this:

<%- SimpleForm.wrapper_tag = :p -%>

notice the result in production: ( :div is used instead of :p )

<form accept-charset="UTF-8" action="/courses/1" class="simple_form edit_course" id="edit_course_1" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="+qH0C/hOaatVnw+Jp2vysanyG5tSB6E6gayIGlJCYbo=" /></div>

<div class="input string optional"><label class="string optional" for="course_course_id"> Course ID</label><input class="string optional" id="course_course_id" maxlength="255" name="course[course_id]" size="50" type="text" value="" /></div>

<div class="input string required"><label class="string required" for="course_name"><abbr title="required">*</abbr> Title</label><input class="string required" id="course_name" maxlength="255" name="course[name]" required="required" size="50" type="text" value="This is my first course here at clouds!!" /></div>

<div class="input text required"><label class="text required block" for="course_description"><abbr title="required">*</abbr> Description</label><textarea class="text required" cols="42" id="course_description" maxlength="1000" name="course[description]" required="required" rows="3">Just to test, to see if precompiled assets for checkeditor is working .. </textarea></div>

<div class="input integer optional field_with_hint"><label class="integer optional" for="course_credits"> Credits</label><input class="numeric integer optional three_digits" id="course_credits" name="course[credits]" step="1" type="number" /><span class="hint">Fill zero to disable course credit</span></div>

<div class="input boolean optional"><input name="course[list_in_catalog]" type="hidden" value="0" /><input checked="checked" class="boolean optional" id="course_list_in_catalog" name="course[list_in_catalog]" type="checkbox" value="1" /><label class="boolean optional" for="course_list_in_catalog"> List in catalog</label></div>

<div class="input string optional"><label class="string optional" for="course_validation_code"> Validation code</label><input class="string optional" id="course_validation_code" maxlength="255" name="course[validation_code]" size="50" type="text" value="" /></div>

<div class="input boolean optional"><input name="course[sequential_chapter_access]" type="hidden" value="0" /><input checked="checked" class="boolean optional" id="course_sequential_chapter_access" name="course[sequential_chapter_access]" type="checkbox" value="1" /><label class="boolean optional" for="course_sequential_chapter_access"> Sequential chapter access</label></div>

</form>

in the development mode is works fine: ( tag :p is used )

<form accept-charset="UTF-8" action="/courses/13" class="simple_form course" id="edit_course_13" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="_method" type="hidden" value="put" /><input name="authenticity_token" type="hidden" value="eOi8hkGQ8eoZYwzIQBcBEB66ekI9kTTYztsyU+UKzmQ=" /></div>

<p class="input string optional"><label class="string optional" for="course_course_id"> Course ID</label><input class="string optional" id="course_course_id" maxlength="255" name="course[course_id]" size="50" type="text" value="" /></p>

<p class="input string required"><label class="string required" for="course_name"><abbr title="required">*</abbr> Title</label><input class="string required" id="course_name" maxlength="255" name="course[name]" required="required" size="50" type="text" value="كيف تكسب الآخرة؟" /></p>

<p class="input text required"><label class="text required  block" for="course_description"><abbr title="required">*</abbr> Description</label><textarea class="text required" cols="42" id="course_description" maxlength="1000" name="course[description]" required="required" rows="3">This is so cool course</textarea></p>

<p class="input numeric integer optional"><label class="integer optional" for="course_credits"> Credits</label><input class="numeric integer optional three_digits" id="course_credits" name="course[credits]" step="1" type="number" value="3" /><span class="hint">Fill zero to disable course credit</span></p>

<p class="input boolean optional"><input name="course[list_in_catalog]" type="hidden" value="0" /><input checked="checked" class="boolean optional" id="course_list_in_catalog" name="course[list_in_catalog]" type="checkbox" value="1" /><label class="boolean optional" for="course_list_in_catalog"> List in catalog</label></p>

<p class="input string optional"><label class="string optional" for="course_validation_code"> Validation code</label><input class="string optional" id="course_validation_code" maxlength="255" name="course[validation_code]" size="50" type="text" value="" /></p>

<p class="input boolean optional"><input name="course[sequential_chapter_access]" type="hidden" value="0" /><input class="boolean optional" id="course_sequential_chapter_access" name="course[sequential_chapter_access]" type="checkbox" value="1" /><label class="boolean optional" for="course_sequential_chapter_access"> Sequential chapter access</label></p>

</form>

Is there any thing I am missing here? What shall I check?

Answer 1

It likely has something to do with class caching in development vs. production.

If you want to change the wrapper_tag globally, you should do it in the simple_form initializer. If you want to change it on a field-by-field basis, you can pass the wrapper_tag option to the input call.