My submit button moves when I resize the page. This behavior is bad (obviously). What is the correct way to make it so that my button is left aligned to my textarea?
#chatboxTranscript {
width: 31.25em;
/* padding: 0em; */
background-color: #36393f;
color: #fff;
display: flex;
border: 0.125em solid #000;
/* Increase border width */
border-radius: 0.3125em 0.3125em 0 0;
/* Round the border */
box-sizing: border-box;
margin: 0 auto;
height: 12.5em;
/* Maintain the height */
}
#chatboxInput {
top: -0.125em;
height: 3.35em;
left: -2.2em;
width: 37.3em;
/* Keep the width the same */
background-color: #36393f;
/* Keep the color the same */
border: 0.15em solid #000;
border-radius: 0 0 0.3125em 0.3125em;
/* Round the border */
padding-bottom: 1.5em;
box-sizing: border-box;
margin: 0 auto;
display: flex;
/* border-top: none; */
position: relative;
}
.input-group {
display: flex;
justify-content: space-between;
}
button[type="submit"] {
position: relative;
display: inline-block;
width: 4em;
top: -0.1em;
height: 3em;
margin: 0 -2em;
border: 0.125em solid #000;
background-color: #36393f;
border-radius: 0.3125em;
}
<div id="chatbox" class="chatbox" data-role="chatbox">
<div id="chatboxTranscript" class="chatbox-transcript"></div>
<div class="input-group">
<!-- <form action="#" onsubmit="handleChatboxFormSubmit(event);"> -->
<textarea type="text" name="chatboxInput" id="chatboxInput" /> </textarea>
<button type="submit">Submit</button>
<!-- </form> -->
</div>
</div>
I tried multiple ways of fixing using absolute positioning (still same behavior), display (did nothing), margin (moves my textarea to the left) and asking chatgpt (output nonsensical CSS that didn’t work).
2
Answers
Is this what you’re trying to achieve?
I’ve removed all position layout styles since they don’t help much in your particular layout.
The main issue was the
.input-group
since it didn’t have a width and you’re using flex for the layout. The content would take the entire width from its parent (#chatbox
) therefore the button went to the right-hand side of the screen.To fix this, I simply added a width for the
.input-group
as well as a margin of auto so it now aligns nicely with#chatboxTranscript
div.