Make textarea conform to container

HTML-CSS
1

Hello,

I am working on my markdown previewer and wondering how to get a text area to conform to a container.

This is what the HTML currently looks like. As you can see, the textarea has a extra margin at the bottom, and despite having a width of 100%, goes over the edge of my container.

image
image3503×723 77.9 KB

My HTML has a container that has container items inside. Each of these container items has two elements: A banner at the top and a textarea.

<body>
  <h1>Markdown Previewer</h1>
  <div class="container">
    <div class="container-item">
     <div class="container-item-banner">
       <p>Editor</p>
     </div>
     <textarea id="editor"></textarea>
    </div>
    <div class="container-item">
     <div class="container-item-banner">
       <p>Preview</p>
     </div>
    </div>
  </div>
</body>

My CSS uses a lot of flexbox to center items. The container item has zero padding (L28) and my textarea is restricted to a width of 100% with only vertical re-size.

.container {
  margin: 0 auto;
  display: flex;
  flex-direciton: row;
  justify-content: center;
  align-items: flex-start;
  gap: 5%;
}
.container-item {
  width: 100%;
  max-width: 750px;
  min-width: 250px;
  height: 100%;
  border: 1px solid black;
  background-color: transparent;
  box-shadow: 2px 2px 5px black;
  padding: none;
}
.container-item-banner {
  width: 100%;
  font-size: 20px;
  background-color: #949bd1;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container-item-banner > p {
  color: white;
  font-size: 23px;
  text-shadow: 2px 2px 5px black;
}
#editor {
  width: 100%;
  resize: vertical;
}

I tried using Developer tools, but I could not figure out why the textarea has extra margins and is too large for the container.

2

Add box-sizing: border-box to it (or better yet to everything)

* {
  box-sizing: border-box;
}
1 Like
3

Hello and I am only suggesting this :
add a universal selector to clear margin and padding, also add box-sizing: border-box;

*  { margin:  0;  padding:  0; box-sizing:  border-box; }

This removes any/all default margins and I read a while back. That margins clash when 2 elements both have them set. I am learning and no expert in any way. But it is worth a try, and google margins clash in css.

image
image1276×956 271 KB

Hope it helps you get to where your going.

Peace … :slight_smile:

1 Like
4

Or try that:

#editor {
  width: 99%;
  resize: vertical;
}

That works at me…

5

How do I remove this margin at the bottom?

image
image1287×463 18.4 KB

6

If you just set the textarea (#editor) to display: flex it should do it.

Otherwise, it is by default inline-block so setting vertical-align: bottom should work as well.

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.