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">×</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%?
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.
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.
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.
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: .
Try add min-width: 100%
to style of your textarea:
<textarea class="form-control" style="min-width: 100%"></textarea>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With