Was trying all possible ways, but never succeeded:
I am new to .NET/MVC programming, but my understanding is that the Site.css file (under the Content folder in MVC) is a site-level override for Bootstrap CSS, allowing you to override bootstrap native settings in a portable and non-destructive manner (e.g. you can easily save and reapply your site.css changes when updating Bootstrap on your system.)
In Bootstrap 3.0.0, Site.css has the following style setting:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Other blogs have suggested that this 280px width was added in haste near a release date, in a desire to make the UI look better than it does with 100% width input. Fortunately it was placed in a "visible" location in the site file so you would notice it.
Simply change the width setting, either for all three input types, or pull out textarea and give it its own setting if you want to leave the others alone.
The provided solutions do resolve the issue. However, they also impact all other textarea
elements with the same styling. I had to solve this and just created a more specific selector. Here is what I came up with to prevent invasive changes.
.modal-content textarea.form-control {
max-width: 100%;
}
While this selector may seem aggressive. It helps restrain the textarea
into the content area of the modal itself.
Additionally, the min-width
solution presented, above, works with basic bootstrap modals, though I had issues when using it with angular-ui-bootstrap modals.
After testing those suggestions here, I draw the conclusion that we have to apply two things.
Apply form-control
class to your textarea
element. This is among Bootstrap's built-in classes.
Extend this class by adding the following property:
.form-control {
max-width: 100%;
}
Hope this helps others who are looking for a solution to this issue.
If i understand right this is what your looking for.
.form-control { width: 100%; }
See demo on JSFiddle.
I had the same problem. I fixed it by adding this piece of code inside the text area's style.
resize: vertical;
You can check the Bootstrap reference here
You can also just simply add the attribute row="number of rows"
and cols="number of columns"
like
<div class="modal-body">
<textarea class="form-control col-xs-12" rows="7" cols="50"></textarea>
</div>
This will increase the number of rows in the textarea that is much similar to style="min-height: 100%"
100% or 80% and min-width: 50%
for width etc. Also row=7
changes the height and cols=50
changes the width of textarea.