Button moves when resizing page-CodePudding

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"  data-role="chatbox">
  <div id="chatboxTranscript" ></div>
  <div >
    <!-- <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).

CodePudding user response：

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.

#chatboxTranscript {
  width: 31.25em;
  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 {
  height: 3.35em;
  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;
}

.input-group {
  display: flex;
  justify-content: space-between;
  width: 31.25em;
  margin: 0 auto;
}

button[type='submit'] {
  display: inline-block;
  width: 4em;
  height: 3em;
  border: 0.125em solid #000;
  background-color: #36393f;
  border-radius: 0.3125em;
}

CodePudding user response：

#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: fixed;
  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;
}

I edited position of button from "reletive" to "fixed". It will work in page.