web-dev-qa-db-ja.com

bootstrapモーダルでテキストエリアの幅を100％に設定します

すべての可能な方法を試しましたが、成功しませんでした：

    <div style="float: right">
        <button type="button" value="Decline" class="btn btn-danger" data-toggle="modal" data-target="#declineModal">Decline</button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="declineModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Comment</h4>
                    </div>
                    <div class="modal-body">
                        <textarea class="form-control col-xs-12"></textarea>
                    </div>
                    <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger">Decline</button>
                </div>
            </div>
        </div>
    </div>

モーダルボディdivでtextareaを作成して、使用可能なすべてのスペース=幅100％をカバーするにはどうすればよいですか？

html5css3twitter-bootstraptextareabootstrap-modal
56
Bartosz

テキストエリアのスタイルにmin-width: 100%を追加してみてください：

<textarea class="form-control" style="min-width: 100%"></textarea>
116
1_bug

私が正しく理解すれば、これはあなたが探しているものです。

.form-control { width: 100%; }

JSFiddleのデモ を参照してください。

10
Izzy

row="number of rows"とcols="number of columns"のような属性を単に追加することもできます

<div class="modal-body">
    <textarea class="form-control col-xs-12" rows="7" cols="50"></textarea>
</div>

これは、style="min-height: 100%" 100％または80％に非常によく似たtextareaの行数を増やし、幅などはmin-width: 50%になります。また、row=7は高さとcols=50を変更しますtextareaの幅を変更します。

3
NomanJaved

提供されたソリューションは問題を解決します。ただし、これらは、同じスタイルを持つ他のすべてのtextarea要素にも影響します。これを解決する必要があり、より具体的なセレクターを作成しました。侵襲的な変化を防ぐために私が思いついたのは次のとおりです。

.modal-content textarea.form-control {
    max-width: 100%;
}

このセレクターはアグレッシブに見えるかもしれませんが。 textareaをモーダル自体のコンテンツ領域に制限するのに役立ちます。

さらに、上記のmin-widthソリューションは基本的なbootstrapモーダルで動作しますが、angular-ui-bootstrapモーダルで使用すると問題が発生しました。

2
Itanex

同じ問題がありました。テキスト領域のスタイル内にこのコードを追加して修正しました。

resize: vertical;

Bootstrapリファレンスを確認できます here

1
Günay Gültekin