Simply by reordering your markup the button is laid over the textarea. It’s more semantically correct to have the button after the input anyway.
Note that I’ve adjusted position styles to better fit your layout. Since you’re reducing the size of the textarea you need to override the width that Bootstrap provides (assuming you’re using proper form element classes).
Protip: Don’t ever tell your users to click somewhere. We all know how to use buttons. It’s just not necessary.
.center {
text-align: center;
}
#textarea {
position: fixed;
bottom: 10px;
right: 10px;
left: 10px;
width: auto;
}
#submit {
position: fixed;
bottom: 20px;
right: 20px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-10">
<p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" rows="5" class="form-control"></textarea></p>
<button type="submit" id="submit" class="btn btn-default">Send!</button>
</div>
</div>
</div>
</body>
Try it like this, The button and the textarea end up in their own individual columns which are col-10 in width. mx-auto then centers the columns.
<div class="row">
<div class="col-sm-10 mx-auto">
<button type="submit" id="submit">Click to send!</button>
</div>
<div class="col-sm-10 mx-auto">
<p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" cols="30" rows="5" ></textarea></p>
</div>
</div>
</div>
I’m building a chatting website and I’m trying to make the “submit message” button to be aligned above the textarea, but I ran into a weird problem. The button is aligned above it, but ( I’m guessing ) because the textarea is resizable, the button is “behind” it in a way.
.center {
text-align: center;
}
#textarea {
position: fixed;
bottom: 10px;
right: 10px;
left: 10px;
}
#submit {
position: fixed;
bottom: 20px;
right: 10px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-10">
<button type="submit" id="submit">Click to send!</button>
<p class="center"><textarea name="main" placeholder="Write your message here!" id="textarea" cols="30" rows="5"></textarea></p>
</div>
<div class="col-sm-1">
</div>
</div>
</div>
</body>
In the snippet, try to minimize the textarea as much as possible; The button is right above it’s minimized state. I thought about fixing it by simply adding margin-bottom to the button but I want my page to be completely responsive for all screen sizes. How could I fix this?
Thanks
Please tag your Bootstrap version.
FYI, your script elements must be inside either the head or the body. It’s invalid HTML otherwise. I’ve removed them since they’re not needed here. Also, Bootstrap 4.0 is
This didn’t work for me.
@15Rabi It should work perfectly for keeping the button above the textarea all of the time and through all of the responsive breakpoints. If you can explain what is not right then hopefully somebody can add another answer for you.
Could you edit your answer into a working snippet? When I tried it, it gave me the same result as before.
