Set textarea width to 100% in bootstrap modal

Question

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

My textarea was inside a div with class="input-group" when I removed input-group (as I didn't really need it) the textarea with class="form-control" expanded to fill the available width automatically — Matthew, Mar 16 '18 at 01:35
Give it a high value for cols, say 500. It'll show as a full with view — Peter Chaula, Aug 13 '18 at 08:57

score 152 · Accepted Answer · answered Jun 02 '15 at 13:02

152

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

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

answered Jun 02 '15 at 13:02

1_bug

5,505
4
50
58

3

Is there any native support to make it fullwidth – Khanh Tran Dec 11 '16 at 08:35

score 12 · Answer 2 · edited Feb 23 '17 at 15:40

12

If i understand right this is what your looking for.

.form-control { width: 100%; }

See demo on JSFiddle.

edited Feb 23 '17 at 15:40

Stacked

6,892
7
57
73

answered Jul 07 '14 at 15:17

Izzy

6,740
7
40
84

score 5 · Answer 3 · answered Dec 31 '15 at 04:11

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.

A few notes. Nice answer. However, maybe a few corrections are needed. You mentioned that the provided solutions impact all other textarea elements. This doesn't seem true with the accepted response, although it is true for other solutions. Second, I think you mean to use "min-width" not "max-width". — David J, Sep 12 '21 at 09:33

NomanJaved · Answer 4 · 2019-02-25T03:52:12.323

5

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.

edited Feb 25 '19 at 03:52

answered Feb 12 '16 at 07:17

NomanJaved

1,324
17
32

7

cols changes width while rows changes height. – dshapiro Jan 24 '17 at 20:02
this is simple and beautiful. – Rahul Bali Jul 18 '22 at 19:40

score 1 · Answer 5 · answered Jan 03 '19 at 08:09

1

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

answered Jan 03 '19 at 08:09

Günay Gültekin

4,486
8
33
36

score 0 · Answer 6 · answered May 15 '20 at 11:14

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.

score -1 · Answer 7 · edited Feb 24 '18 at 01:26

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.

Set textarea width to 100% in bootstrap modal

7 Answers7

Linked

Related