如何防止调整大小的TextArea溢出页面？ [英] How to prevent a TextArea that resizes from overflowing the page?

问题描述

我正在创建一个在页面中水平和垂直居中的TextArea。鉴于我需要TextArea垂直居中，我不能让textarea为100w和100h，我需要它从一个小高度开始然后随着用户类型增长。我还需要一个单击捕获器，因此如果用户单击textarea周围的区域，则textarea会聚焦。 （灰色bkg仅用于调试目的）

我在CodePen上有一个演示：

当textarea越过周围的div时，用户界面破碎。

谢谢！

解决方案

主要原因是当使用 align-items：center 和/或 justify-content：center ，该元素溢出其父级，在本例中为top / bottom。

要解决此问题，需要使用自动边距代替，并使用能够控制垂直和水平，顶部/底部，左/右等对齐。

您还有很多高度：100％在你的代码中（我清理了），并与Flexbox结合，导致更多问题，所以改为使用Flexbox自己的属性，例如：这里 flex：1 关于flex列项，这将填充父级的高度。

还添加 min-height：0 所以Firefox一直播放。

更新了codepen

Stack snippet

  autosize（document.getElementById（note））; $（。textAreaClickCapturer）.mouseup（function（） {$（＃note）。focus（）;}）;  

  html，body {margin：0;身高：100％;}身体{display：flex; flex-direction：column;}。page-body.fullScreen {flex：1;显示：flex;弯曲方向：柱;背景：#efefef; min-height：0;} form {flex：1;显示：flex;弯曲方向：柱; min-height：0;} form .textAreaClickCapturer {flex：1;显示：flex;弯曲方向：柱; min-height：0;} form .field {flex：1;显示：flex;弯曲方向：柱;最小高度：0; padding：24px;} textarea {border：none; border-radius：0; font-size：21px;填充：0;宽度：90％; text-align：center;溢出：自动; margin：auto;}  

 < script src =https ：//rawgit.com/jackmoore/autosize/master/dist/autosize.min.js>< / script>< script src =https://ajax.googleapis.com/ajax/libs/jquery/ 2.1.1 / jquery.min.js>< / script>< div class =page-body fullScreen> < form action =/> < div class =textAreaClickCapturerrole =presentation> < div class =field> < textarea id =noteplaceholder =Say something ...rows =3>< / textarea> < / DIV> < / DIV> < / form>< / div>  

I'm working to create a TextArea that is horizontally and vertically centered in the page. Given that I need the TextArea to be vertically centered, I can't have the textarea be 100w and 100h, I need it to start with a small height and then grow as the user types. I also need a click capturer so if the user clicks the area surrounding the textarea, the textarea focuses. (the gray bkg is just for debugging purposes)

I have a demo on CodePen here: https://codepen.io/anon/pen/OQbvxa

autosize(document.getElementById("note"));

$( ".textAreaClickCapturer" ).mouseup(function() {
  $( "#note" ).focus();
});

html, body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.page-body.fullScreen {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: #EFEFEF;
  text-align: left;
  padding: 0!important;
  align-items: normal;
  justify-content: normal;
}

form {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}

form .textAreaClickCapturer {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  align-items: center
}

form .field {
  width: 100%;
  margin: 0;
  padding: 24px;
  clear: both;
  max-height: max-content;
  height: 100%;
  align-items: center;
}

textarea {
  border: none;
  border-radius: 0;
  font-size: 21px;
  line-height: 28px;
  padding: 0;
  vertical-align: top;
  width: 100%;
  text-align: center;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<div class="page-body fullScreen ">
  <form action="/">
    <div class="textAreaClickCapturer" role="presentation">
      <div class="field">
        <textarea id="note" placeholder="Say something..." rows="3"></textarea>
      </div>
    </div>
  </form>
</div>

When you type in multiple lines, the TextArea does grow nicely but eventually, the TextArea grows pasts the size of the screen causing it to break.

How can I get the TextArea are to grow where the TextArea doesn't go behind the page and break but has a working overflow to handle lots of text?

Desired Initial Experience

Broken UI, when the textarea grows past the surrounding div.

Thank you!

解决方案

The main reason is that when using align-items: center and/or justify-content: center, the element overflow its parent both at, in this case, top/bottom.

To solve that, one need to use auto margin's instead, and with that be able to control the alignment both vertical and horizontal, top/bottom, left/right, etc.

You also had a lot of height: 100% in your code (which I cleaned up), and combined with Flexbox, that cause more issues, so instead use Flexbox's own properties, e.g. here flex: 1 on flex column items, that will fill the parent's height.

Also added min-height: 0 so Firefox play along.

Updated codepen

Stack snippet

autosize(document.getElementById("note"));

$( ".textAreaClickCapturer" ).mouseup(function() {
  $( "#note" ).focus();
});

html,
body {
  margin: 0;
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.page-body.fullScreen {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #efefef;
  min-height: 0;
}

form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

form .textAreaClickCapturer {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

form .field {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 24px;
}

textarea {
  border: none;
  border-radius: 0;
  font-size: 21px;
  padding: 0;
  width: 90%;
  text-align: center;
  overflow: auto;
  margin: auto;
}

<script src="https://rawgit.com/jackmoore/autosize/master/dist/autosize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-body fullScreen ">
  <form action="/">
    <div class="textAreaClickCapturer" role="presentation">
      <div class="field">
        <textarea id="note" placeholder="Say something..." rows="3"></textarea>
      </div>
    </div>
  </form>
</div>

这篇关于如何防止调整大小的TextArea溢出页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！