CODEWITHSUNDEEP
css
Danjuro
Danjuro

Reputation: 141

Textarea expands past the padding and isn't flush

I have everything in my comment box set with a width of 100%. The div has a padding of 10px. However, the textarea somehow goes into that padding, but only on the right side. A bit hard to explain but here is a photo: https://i.sstatic.net/qjrAC.png

You can see on the right that the textarea exceeds the rest.

I have tried googling this problem but I can't seem to find anybody else that has experienced this. It shows in every browser, which I thought at first it was a browser issue.

Here is the modal itself code:

#pictureModal {
  width: 31%;
  height: auto;
  text-align: left;
  position: absolute;
  top: calc(50vh - (/* height */100px / 2));
  left: calc(50vw - (/* width */140px / 2));
  padding: 20px;
  background-color: black;
  color: white;
  text-align: center;
}

And here is the input code:

#pictureModalInput{
  width: 100%;
  height: 30px;
  outline: none;
}

I want the right of the textarea to be flush with the X box and the Submit button.

Upvotes: 0

Views: 156

Answers (2)

Arshiya Khanam
Arshiya Khanam

Reputation: 613

Try this one also I think its useful for you. You have to use box-sizing: border-box; in this #pictureModalInput id. 

#pictureModal {
   width: 31%;
   height: auto;
   text-align: left;
   position: absolute;
   top: calc(50vh - (/* height */100px / 2));
   left: calc(50vw - (/* width */140px / 2));
   padding: 20px;
   background-color: black;
   color: white;
   text-align: center;
}

#pictureModalInput{
  border: none;
  height: 30px;
  outline: none;
  box-sizing: border-box;
  width: 100%;
}

button {
  background: black;
  border: 2px solid #FFF;
  border-radius: 0;
  color: #FFF;
  margin-top: 6px;
  text-align: center;
  width: 100%;
}
<div id="pictureModal">
  <textarea id="pictureModalInput"></textarea>
  <button>Submit</button>
</div>

Upvotes: 2

jaredgorski
jaredgorski

Reputation: 540

Remove the padding on the textbox. I included an example below with just a couple deviations from your code.

Textbox padding is a user-agent style, meaning that it comes shipped with the element itself. You can override these user-agent styles in your stylesheet. It's good to be aware of these styles by reading up online and then exploring any layout issues you're having with devTools to see whether any user-agent styles might be causing your bug.

#pictureModal {
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  height: auto;
  left: calc(50vw - (/* width */140px / 2));
  padding: 20px;
  position: absolute;
  top: calc(50vh - (/* height */100px / 2));
  width: 31%;
}

#pictureModalInput{
  border: none;
  height: 30px;
  outline: none;
  padding: 0;
  width: 100%;
}

button {
  background: black;
  border: 2px solid #FFF;
  border-radius: 0;
  color: #FFF;
  margin-top: 6px;
  text-align: center;
  width: 100%;
}
<div id="pictureModal">
  <textarea id="pictureModalInput"></textarea>
  <button>Submit</button>
</div>

Upvotes: 0

Related Questions