title: Symfony form_widget() in Twig gives <input> wrapped in a <div> (with jQuery and jQuery-mobile)
body: <p>For this case, let's pretend I implement a form with the official example: <a href="http://symfony.com/doc/current/book/forms.html" rel="nofollow">http://symfony.com/doc/current/book/forms.html</a></p>
  
  <p>At the "Rendering each Field by Hand" title, I want to add some attribute in the twig file so all my fields are evenly placed on a row by using "col-* css" manner to occupy space on a row.</p>
  
  <pre><code>{{ form_start(form) }}
  &lt;div class="col-12"&gt;
      {{ form_label(form.task,null,{'label_attr': {'class':'col-3'}}) }}
      {{ form_widget(form.task, {'attr': {'class': 'col-4' }}) }}
      {{ form_errors(form.task, {'attr': {'class': 'col-5'}}) }}
  &lt;/div&gt;
  
  {{ form_end(form) }}
  </code></pre>
  
  <p>With that example, the rendering of form_widget will be:</p>
  
  <pre><code>&lt;div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"&gt;
      &lt;input type="text" id="task_task" name="task[task]" required="required" class="col-4"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>One notices that <strong>"col-4"</strong> class attribute is in the <code>input</code> tag but since this tag is <strong>surrounded by a <code>div</code></strong> the display is not as expected and the <strong>"col-4" should be indeed in the <code>div</code> tag which is the parent of the <code>input</code> tag</strong> so as to have the "col-4" rule applying on the screen.</p>
  
  <p>So I wonder if there is a way with the symfony form to transfer the class attribute of the <code>input</code> set with Twig function form_widget() to its parent <code>div</code> instead of going with the jQuery  javascript function to fix the DOM display?</p>