Question

I’ve got a form I am working on for a task management/bug reporting application..

I’ve written the code to add a new Bug Report and it works, now I’m looking to fix the HTML a little bit but I’m having a little bit of trouble with the width of a textarea and a textbox.

<div class="g12">
<form action="{{ path('feedback_create', { 'category': category }) }}" method="post" {{ form_enctype(form) }}>
        <fieldset>
            <label class="handle">Title</br><span class="small">Short Descriptive Title</span></label>
            {{ form_widget(form.title )}}
            <label class="handle">Problematic Steps</br><span class="small">Detailed Steps to Reproduce the Problem</span></label>
            {{ form_widget(form.userNotes)}}
        </fieldset>
    {{ form_rest(form) }}
    <p>
        <button type="submit">Create</button>
    </p>
</form>
</div>

This is the HTML i’ve got currently — It displays the way that I want to.. Except the textbox and the text area seem to overlap the sides of the table.. I’ve tried to clear my cache, and wrap the form_widget lines in a div with a set width to no avail…

I’ve created the basics with minimal CSS missing on jsfiddle for the visual aspect of what it’s doing.

http://jsfiddle.net/758ub/

I appreciate any ideas or tips to get it fixed.

Answer 1

Your CSS has

input, textarea { width: 99%; } /* This is not the cause */

I noted that putting:

display: none; /* This is not the cause */

on both items (INPUT & TEXTAREA) would still keep the form very wide. This is due to your .g12 class width value. When I put

.g12 { width: auto; } /* This is a solution */

It shrinks.
In fiddle the scrollbar remains, because of the first DIV, with the 800px width. I guess this should remain unchanged.

Note that you should put this rule under the other rules where width applies to .g12, or make the selector heavier:

div.g12 { width: auto; }