Textarea对于容器来说太小了。甚至无法手动放大

时间:2016-02-19 13:30:33

标签: html css forms size textarea

我在某些div块中遇到textarea的问题。无论我做什么,它都不会接受块的完整width。我尝试给它一个固定的100%width,我尝试给它更多的cols,我尝试在浏览器中手动增加大小,它只是不会填满整个容器而我不明白为什么。它起作用,好像右边有一个看不见的col,但是没有。

**注意:** textarea之前的文本部分(testwethsfjg .....)只是为了查看文本是否与textarea绑定在同一边界上。< / p>

也许有人知道问题可能是什么。帮助将不胜感激。

CODE

&#13;
&#13;
    .comment-box {
      padding-top: 20px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 20px;
      margin-left: 200px;
      margin-right: 200px;
      background-color: #e9dac6;
      border-radius: 25px;
      border: 3px solid green;
    }
    .comment-box-empty {
      margin-bottom: 20px;
      background-color: white;
      border-radius: 25px;
      border: 1px solid black;
    }
    .comment-box-full {
      margin-top: 20px;
      margin-bottom: 0px;
      margin-left: 30px;
      margin-right: 30px;
      background-color: white;
      border-radius: 25px;
      border: 1px solid black;
    }
    .comment-box-top {
      margin: auto;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;
      padding-bottom: 10px;
      background-color: #faebd7;
      border-top-left-radius: 25px;
      border-top-right-radius: 25px;
      border: none;
      width: 100%;
      height: 100%;
    }
    .comment-box-top-text {
      font-size: 19px;
      font-weight: bold;
      line-height: 1;
      width: auto;
      height: auto;
      display: inline;
    }
    .comment-box-content {
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 10px;
      padding-bottom: 10px;
      border: none;
      width: 100%;
    }
    .comment-box-content-text {
      text-align: justify;
      font-size: 17px;
      font-weight: 400;
      line-height: 1.25;
    }
&#13;
<div class="comment-box">
  <div class="comment-box-empty">
    <form id="usr_comment">
      <div class="comment-box-top">
        <div class="comment-box-top-text">
          <label for="name">Name:</label>
          <input type="text" size="10" name="name" />
          <label for="email">Email:</label>
          <input type="email" size="15" name="email" />
          <br />
          <input type="checkbox" name="show_mail" value="showmail" checked />
          <label for="show_mail">E-Mail für alle Sichtbar anzeigen?</label>
          <br />
        </div>
      </div>
      <div class="comment-box-content">
        testwethsfjggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
        <br />
        <textarea></textarea>
        <br />
        <br />
        <button type="submit" class="btn btn-primary btn-sm">Post</button>
      </div>
    </form>
  </div>

  @{ foreach (var comment in ViewBag.rb1.CommentList) { if (ViewBag.rb1count > 0) {
  <div class="comment-box-full">
    <div class="comment-box-top">
      <div class="comment-box-top-text">
        @comment.Name @comment.Email
      </div>
    </div>
    <div class="comment-box-content">
      <div class="comment-box-content-text">
        @comment.Content
      </div>
    </div>
  </div>
  } } }
</div>
&#13;
&#13;
&#13;

Screenshot of max width of textarea

2 个答案:

答案 0 :(得分:2)

您需要将width:100%提交给textarea,如果还没有,请重置margin/padding,并停止重新调整width的大小,我可以使用resize:none }或resize:vertical取决于您的情况

这是一个示例:

div {
  width: 500px;
  border: red solid;
  box-sizing: border-box;
  padding: 5px;
}
textarea {
  width: 100%;
  margin: 0;
  padding: 0;
  resize:vertical
}
<div>
  <textarea></textarea>
</div>

答案 1 :(得分:0)

实际上你可以设置你的textarea的宽度,但是一旦用户手动更改它,css就不再工作了,所以你可以添加一个resize:none来确保textarea的宽度

textarea {
  resize: none;
  width: 90%;
}