How can I position a button below the text area but outside of its boundaries?

Question

How can I position a button below the text area but outside of its boundaries?

Greetings! Here's an image of the current state I am in: https://i.sstatic.net/Ceemp.jpg

However, my desired outcome should look like this: https://i.sstatic.net/0IN5w.jpg

In my text area, consisting of 5 rows, I would like the button to be positioned towards the bottom of the text area.

This is the code I have used:

<div class="row">
<p class="col-sm-6 col-md-10 ">
<b >Mail</b> <br />                                                         
<textarea class="form-control" rows="5" id="Email"></textarea>
</p>
<p class="col-sm-6 col-md-2">
<br />
<a id="btnSave" onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block"><span style="color: #fff;" class="glyphicon glyphicon-save"></span>Save</a></p> </div>

I have come across some suggestions advising me to add a Bootstrap 4.0 link. However, it did not work as expected and only altered my display slightly. Here's an image for reference: https://i.sstatic.net/0x3nY.jpg

css button textarea bootstrap-4

Answer 1

Answer №1

Here is an unconventional response to the question, but it has proven effective in my case

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="position:relative">
<div class="col-sm-6 col-md-10 ">
<b >Mail</b> <br />                                                         
<textarea class="form-control" rows="5" id="Email"></textarea>
</div>
<div class="col-sm-6 col-md-2" style="position:relative">
<br />
<a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block" style="position:absolute;bottom:0"><span style="color: #fff;" class="glyphicon glyphicon-save"></span>Save</a></div> </div>

Answer 2

Here is an unconventional response to the question, but it has proven effective in my case

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="position:relative">
<div class="col-sm-6 col-md-10 ">
<b >Mail</b> <br />                                                         
<textarea class="form-control" rows="5" id="Email"></textarea>
</div>
<div class="col-sm-6 col-md-2" style="position:relative">
<br />
<a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block" style="position:absolute;bottom:0"><span style="color: #fff;" class="glyphicon glyphicon-save"></span>Save</a></div> </div>

Answer 3

Answer №2

Implement the inline form feature of bootstrap and adjust the button position to be absolute with a bottom value of 0 within a parent div set to relative positioning. This will ensure that the button is located at the bottom area in relation to its parent element.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div class="container" style="position:relative">
  <form class="form-inline" action="/action_page.php">
  <div class="form-group col-xs-10">
   <textarea class="form-control" rows="5" id="comment"></textarea>
  </div>

  <button type="submit" style="position:absolute;bottom:15px;" class="btn btn-default">Submit</button>

</form> 
</div>

Answer 4

Implement the inline form feature of bootstrap and adjust the button position to be absolute with a bottom value of 0 within a parent div set to relative positioning. This will ensure that the button is located at the bottom area in relation to its parent element.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<div class="container" style="position:relative">
  <form class="form-inline" action="/action_page.php">
  <div class="form-group col-xs-10">
   <textarea class="form-control" rows="5" id="comment"></textarea>
  </div>

  <button type="submit" style="position:absolute;bottom:15px;" class="btn btn-default">Submit</button>

</form> 
</div>

Answer 5

Answer №3

It is recommended to utilize a table for this purpose.

<div class="row">
<table style="width: 100%">
    <tr>
        <td class="col-md-6 col-md-offset-1">
                <b >Mail</b>
        </td>
    </tr>
 <tr>
     <td>
            <textarea class="form-control" rows="5" id="Email"></textarea>
     </td>
     <td style="vertical-align: bottom">
            <a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block"><span style="color: #fff;" class="glyphicon glyphicon-save"></span>Save</a>
     </td>
 </tr>       
</table>
 </div>

Answer 6

It is recommended to utilize a table for this purpose.

<div class="row">
<table style="width: 100%">
    <tr>
        <td class="col-md-6 col-md-offset-1">
                <b >Mail</b>
        </td>
    </tr>
 <tr>
     <td>
            <textarea class="form-control" rows="5" id="Email"></textarea>
     </td>
     <td style="vertical-align: bottom">
            <a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block"><span style="color: #fff;" class="glyphicon glyphicon-save"></span>Save</a>
     </td>
 </tr>       
</table>
 </div>

Answer 7

Answer №4

When utilizing Bootstrap 4, you have the option to include d-flex align-items-end in your button wrapper based on the new Bootstrap 4 flexbox utilities...

Furthermore, it is recommended to convert your paragraph columns to div elements since they are not paragraphs. You can refer to: https://www.w3schools.com/html/html_paragraphs.asp

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-10 ">
      <b >Mail</b> <br />                                                         
      <textarea class="form-control" rows="5" id="Email"></textarea>
    </div>
    <div class="col-sm-6 col-md-2 d-flex align-items-end">
      <a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block">
        <span style="color: #fff;" class="glyphicon glyphicon-save"></span>
        Save
      </a>
    </div>
   </div>
 </div>

If you prefer not to use Bootstrap, you can assign a class to your wrapper and apply the following CSS:

.form-wrapper > div {
    display: inline-block;
    vertical-align: bottom;
}

.form-wrapper > div {
    display: inline-block;
    vertical-align: bottom;
}

<div class="container">
  <div class="row form-wrapper">
    <div class="col-sm-6 col-md-10 ">
      <b >Mail</b> <br />                                                         
      <textarea class="form-control" rows="5" id="Email"></textarea>
    </div>
    <div class="col-sm-6 col-md-2">
      <a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block">
        <span style="color: #fff;" class="glyphicon glyphicon-save"></span>
        Save
      </a>
    </div>
   </div>
 </div>

Answer 8

When utilizing Bootstrap 4, you have the option to include d-flex align-items-end in your button wrapper based on the new Bootstrap 4 flexbox utilities...

Furthermore, it is recommended to convert your paragraph columns to div elements since they are not paragraphs. You can refer to: https://www.w3schools.com/html/html_paragraphs.asp

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-10 ">
      <b >Mail</b> <br />                                                         
      <textarea class="form-control" rows="5" id="Email"></textarea>
    </div>
    <div class="col-sm-6 col-md-2 d-flex align-items-end">
      <a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block">
        <span style="color: #fff;" class="glyphicon glyphicon-save"></span>
        Save
      </a>
    </div>
   </div>
 </div>

If you prefer not to use Bootstrap, you can assign a class to your wrapper and apply the following CSS:

.form-wrapper > div {
    display: inline-block;
    vertical-align: bottom;
}

.form-wrapper > div {
    display: inline-block;
    vertical-align: bottom;
}

<div class="container">
  <div class="row form-wrapper">
    <div class="col-sm-6 col-md-10 ">
      <b >Mail</b> <br />                                                         
      <textarea class="form-control" rows="5" id="Email"></textarea>
    </div>
    <div class="col-sm-6 col-md-2">
      <a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block">
        <span style="color: #fff;" class="glyphicon glyphicon-save"></span>
        Save
      </a>
    </div>
   </div>
 </div>

Answer 9

Answer №5

Thanks to everyone for your suggestions. I tried everything mentioned above, but nothing seemed to work flawlessly. Eventually, I decided to simply add <br /> into the code and that miraculously fixed my issue. Here is the modified code snippet:

<p class="col-sm-6 col-md-6 ">
<b >Mail </b> <br />
<textarea class="form-control" rows="5" id="Email"></textarea>
</p>
<p class="col-sm-6 col-md-2 col-xs-12" ">
<br /><br /><br  /><br /><br />
<a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block"><span style="color: #fff;" class="glyphicon glyphicon-save"></span>Save</a>
</p>

Adding the line break resolved my issue completely. Thank you!

Answer 10

Thanks to everyone for your suggestions. I tried everything mentioned above, but nothing seemed to work flawlessly. Eventually, I decided to simply add <br /> into the code and that miraculously fixed my issue. Here is the modified code snippet:

<p class="col-sm-6 col-md-6 ">
<b >Mail </b> <br />
<textarea class="form-control" rows="5" id="Email"></textarea>
</p>
<p class="col-sm-6 col-md-2 col-xs-12" ">
<br /><br /><br  /><br /><br />
<a id="btnSave"  onclick="SaveValue()" class="btn btn-success btn-flat btn-xs-block"><span style="color: #fff;" class="glyphicon glyphicon-save"></span>Save</a>
</p>

Adding the line break resolved my issue completely. Thank you!

How can I position a button below the text area but outside of its boundaries?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Turn off hover functionality for mobile and tablet devices

iOS Safari browser does not support changing the caret color in textarea

Stop the image transformation/transition when the back face is not visible

Prevent the use of repetitive borders by utilizing display: inline-block

The drop-down arrow in the <select> element seems determined to stay within the container

Scroll vertically to navigate through sub-menus in the menu bar

"Utilize CSS for animating list items within a ul

What is the best way to position the text diagonally while keeping the letters arranged horizontally?

What is the method of generating an HTML tag solely using CSS?

Using SVG and CSS to color multiple paths with individual colors

Exploring the power of Angular by implementing nested ng-repeat functionalities:

Tips for updating the hover background color of a table row with a unique class in bootstrap

Issues with Jquery datatable causing column header to overlap the table header

I desire for my div elements to stack on top of each other

Divs should be of consistent and adjustable height

Tips on creating CSS for an element with certain text within it?

Ajax request unable to load Image Slider

TailwindCSS in React.Js does not seem to accept randomly generated color codes

Creating a combined Email and Password form field in a single row using Bootstrap

What is the best way to remove a CSS style using JavaScript?