Bootstrap input-group textarea with button

Question

I am trying to implement a simple submit input group. I currently have the following:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="input-group">
    <textarea class="form-control custom-control" rows="3" style="resize:none"></textarea> <span class="input-group-btn">
                                    <button class="btn btn-primary">                            
                                        <span>Send</span>

    </button>
    </span>
</div>

I want the 'Send' button to take up the entire height of the text area. Is this doable?

Answer 1

What you need to do is use the input-group-addon utility. This will allow the space of the button to take up the entire height. You will need to adjust the fill because it only works on hover (the color change). I'd recommend copying all the relevant class styles and make your own (for the color and background color so it's not the default Bootstrap style).

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="input-group">
    <textarea class="form-control custom-control" rows="3" style="resize:none"></textarea>     
    <span class="input-group-addon btn btn-primary">Send</span>
</div>

I know it's not in line with Bootstrap documentation, but their documentation assumes you aren't using a textarea.

Answer 2

Just to elaborate on Aibrean's answer and to further clarify how to make his/her span tag operable.

We will need to bind the span to an event listener, in the example below I use jQuery.

; (function ($) {
  $('#submitMyForm').on('click', function () {
    //$('#myForm').submit(); // js fiddle won't allow this
    alert("form submitted");
  });
  
})(jQuery)

#exampleWrapper {
  padding: 100px;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div id="exampleWrapper">
  <form id="myForm" method="POST" action="?process-form">
      <div class="input-group">
          <textarea class="form-control custom-control" rows="3" style="resize:none"></textarea>
          <span class="input-group-addon btn btn-primary" id="submitMyForm">Send</span>
      </div>
  </form>
</div>