Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting the width of a Textarea in Bootstrap 3

I've been searching for a way to make my 'textarea' go to 100% inside it's column. I've seen a few different ways (none of which I've been able to work) to make a 'textarea' expand to 100% in Bootstrap. I've everything from custom in line CSS styles to using class="form-control col-lg-12" to overwriting Bootstrap's CSS.

Anyone have a working suggestion that would allow for fluid re-sizing?

Here is the code that I have. Right now the width goes to a little past the placeholder text.

<div class="row">
            <div class="col-lg-7">
                <h2>@Model.EmployeeName</h2>
                <h3>Employee #: @Model.EmployeeNumber</h3>

                <h5>(Optional): Exception Log comments related to this shift for your Supervisor/Time Keeper.</h5>
                <textarea rows="2" placeholder="Exception Log comments."></textarea>
            </div>
            <div class="col-lg-5 text-right">
                <div ng-controller='TimeCtrl'>
                    <h2>{{ clock | date:'fullDate'}}</h2>
                    <h1>{{ clock | date:'HH:mm:ss'}}</h1>
                    <input type="submit" class="btn btn-xxlarge btn-success" value="Punch In" />
                </div>
            </div>
        </div>
like image 891
Caverman Avatar asked Mar 10 '16 19:03

Caverman


1 Answers

I believe bootstrap's own form element class (form-control) is what will make form elements take up the full width of the column they are in.

<textarea class="form-control"></textarea>
like image 163
georaldc Avatar answered Sep 30 '22 00:09

georaldc