0

タスク管理/バグレポートアプリケーション用に作業しているフォームがあります。

新しいバグレポートを追加するコードを記述しましたが、機能します。HTMLを少し修正しようとしていますが、atextareaと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>

これは私が現在持っているHTMLです-それは私が望む方法を表示します..textboxとテキスト領域がテーブルの側面と重なっているように見えることを除いて..キャッシュをクリアしてform_widgetをラップしようとしました幅が役に立たないように設定されたdiv内の行...

私は、jsfiddleが実行していることの視覚的側面について、最小限のCSSが欠落している基本を作成しました。

http://jsfiddle.net/758ub/

それを修正するためのアイデアやヒントに感謝します。

4

1 に答える 1

3

あなたのCSSは

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

私は次のことを指摘しました：

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

両方の項目 (INPUT & TEXTAREA) でフォームを非常に広く保ちます。これは、.g12 クラス幅の値によるものです。私が置くとき

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

収縮します。最初の DIV が 800px の幅であるため、フィドルではスクロールバーが残ります。これは変わらない方がいいと思います。

幅が .g12 に適用される他のルールの下にこのルールを配置するか、セレクターをより重くする必要があることに注意してください。

div.g12 { width: auto; }
于 2012-06-28T08:29:57.660 に答える