Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set textarea width to 100% in bootstrap modal

Was trying all possible ways, but never succeeded:

    <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>  

How to make the textarea in modal-body div to cover all available space = width 100%?

like image 418
Bartosz Avatar asked Jul 05 '14 09:07

Bartosz


People also ask

How do I change the width of a bootstrap modal?

Modal Size Change the size of the modal by adding the . modal-sm class for small modals, . modal-lg class for large modals, or . modal-xl for extra large modals.

How can I fix the width of my textarea?

To prevent a text field from being resized, you can use the CSS resize property with its "none" value. After it you can use the height and width properties to define a fixed height and width for your <textarea> element.

How do I change the width and height of a textarea?

There are two ways of setting the size of the HTML <textarea> element. You can use HTML or CSS. In HTML, you can use the cols and rows attributes.

How do I increase the width of a textarea in HTML?

You need to define width of the div containing the textarea and when you declare textarea , you can then set . main > textarea to have width: inherit . Note: .


1 Answers

Try add min-width: 100% to style of your textarea:

<textarea class="form-control" style="min-width: 100%"></textarea> 
like image 121
1_bug Avatar answered Sep 23 '22 05:09

1_bug