Вопрос по javascript, css3, css, html5, flexbox – и ты в квадрате. По умолчанию ваш вертикальный переполнение прокручивается, поэтому вам больше не нужно ничего делать.

0

отаю над созданием TextArea, которое горизонтально и вертикально центрировано на странице. Учитывая, что мне нужно, чтобы TextArea было центрировано по вертикали, у меня не может быть текстовой области 100w и 100h, мне нужно, чтобы она начиналась с небольшой высоты, а затем увеличивалась по мере ввода пользователем текста. Мне также нужен захватчик кликов, поэтому, если пользователь щелкает область вокруг текстовой области, текстовая область фокусируется. (серый bkg только для целей отладки)

У меня есть демо на CodePen здесь: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>

Когда вы набираете несколько строк, TextArea действительно хорошо растет, но со временем TextArea увеличивается и вставляет размер экрана, вызывая его разрыв.

Как я могу получить TextArea для роста, когда TextArea не идет за страницей и не разрывается, а имеет рабочий переполнение для обработки большого количества текста?

Желаемый начальный опыт

Сломанный пользовательский интерфейс, когда текстовая область проходит мимо окружающего элемента div.

Спасибо!

Ваш Ответ

4   ответа
0

В селекторе textarea в CSS добавьте:

max-height: 90%; overflow: auto;

Это дает вам полосу прокрутки, если введенный контент превышает максимальную высоту, а максимальная высота определяется размером содержащего элемента div.

3

align-items: center и / илиjustify-content: center, элемент переполняет своего родителя как в этом случае, сверху / снизу.

Чтобы решить эту проблему, вместо этого нужно использовать автоматические поля, и при этом иметь возможность управлять выравниванием как по вертикали, так и по горизонтали, сверху / снизу, влево / вправо и т. Д.

У тебя также было многоheight: 100% в вашем коде (который я очистил) и в сочетании с Flexbox, которые вызывают больше проблем, поэтому вместо этого используйте собственные свойства Flexbox, например, Вотflex: 1 на элементах столбца flex, которые будут заполнять высоту родителя.

Также добавленоmin-height: 0 так что Firefox подыгрывает.

Обновленный кодекс

Фрагмент стека

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>

2

Я думаю, что вы можете использоватьmax-width а такжеmax-height:

textarea {
  ...
  max-width: 100%;
  max-height: 100%;
}

Обновить

Я упростил как HTML, так и CSS, фрагмент кода:

autosize(document.getElementById("note"));
$(".textAreaClickCapturer").mouseup(function() {
  $("#note").focus();
});
html, body, form {
  height: 100%;
}

body {
  background: #efefef;
  margin: 0;
}

form {
  display: flex;
  align-items: center; /*center vertically*/
  padding: 24px;
  box-sizing: border-box;
}

textarea {
  font-size: 20px;
  text-align: center;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}
<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>

<form class="textAreaClickCapturer" action="/">
  <textarea id="note" placeholder="Say something..." rows="3"></textarea>
</form>

0

как сказали другие, лично я предпочитаю использовать vh применительно к высоте в вашей ситуации. Так что в вашей ручке это будет просто:

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

и ты в квадрате. По умолчанию ваш вертикальный переполнение прокручивается, поэтому вам больше не нужно ничего делать.

Похожие вопросы