Issue
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/bootstrap@4.0.0/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
Solution
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/bootstrap@4.0.0/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>Answered By - isherwood
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.