Resizable textarea in Bootstrap modal dialogue

Question

I'm trying to put a resizable textarea in a bootstrap modal.

The problem is when I resize the text area horizontally. It breaks the modal dialogue.

How can I make it responsive horizontally?

Here is the code

<div class="container-fluid">
<div class="row">
    <!-- Button trigger modal -->
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" 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" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">

                    <form class="form-horizontal" id="feedback_form" action="javascript:feedback_submit();"
                          role="form">
                        <input type="hidden" name="feedback_url" value="http://fmoffice:8080/about"
                               class="form-control">
                        <input type="hidden" name="feedback_tracking_id" value="" class="form-control">
                        <div class="form-group">
                            <div class="form-group" id="feedback_comment_group">
                                <label class="col-sm-3 control-label" for="feedback_input_comment">Feedback:</label>
                                <div class="col-sm-9 controls">
                                    <textarea id="feedback_input_comment" name="feedback_comment"
                                              class="form-control" rows="5" placeholder="Your Feedback"></textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-3 col-sm-9">
                                    <button type="submit" class="btn btn-primary">Send Feedback</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>

Here is the code on js bin

Any help is appreciated :)

Answer 1

Please use the below css

textarea {
    resize: vertical;
}