Как вертикально центрировать элемент ввода/текстовой области, где несколько строк текста все еще переносятся ниже?

Я использую Ionic 3, поэтому рассматриваемый элемент находится внутри элемента, который я стилизую (первоначально у меня была внутренняя часть, но, поскольку нет абсолютно никакого способа обернуть однострочный элемент ввода, я вынужден использовать textarea). Мне нужно иметь элемент textarea (мне все равно, сколько строк), где пользователь может ввести несколько строк текста. НО мне также нужно, чтобы начало этого текста находилось точно в центре элемента textarea (чтобы выровняться с другими элементами, создающими общую вещь.

ввод и текстовая область

Высоты на них являются процентными значениями, поэтому попытка line-height, vertical-align и тому подобное не увенчалась успехом. Я попробовал display: flex и centering, а также display: table-cell и вертикальное выравнивание, и ни на одном из них не было кубиков. Поскольку это веб-приложение и мобильное приложение, мне также не удалось выполнить padding-top из-за разных платформ.

Я хотел бы, чтобы начало текста в текстовой области начиналось в центре текстовой области, чтобы оно выравнивалось с другим содержимым, как на изображениях выше, но также имело возможность переноса на новые строки, когда текст становится длиннее, чем ширина текстовой области.


ionic-framework angular input css textarea
person mateotherock    schedule 02.04.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я думаю, что наконец-то понял это на самом деле, и, похоже, он работает как в Интернете, так и на мобильных устройствах. Вот код...

setTimeout(() => {
  const textarea: HTMLHtmlElement = window.document.querySelector('.wizard_statement_text');
  const lineHeight = Number(window.getComputedStyle(textarea).lineHeight.slice(0, -2));
  const h = textarea.getBoundingClientRect().height;
  const top = h/2 - lineHeight/2;
  textarea.style.paddingTop = `${top}px`;
}, 100);

В основном мне нужно setTimeout, чтобы получить правильное значение getBoundingClientRect для высоты текстовой области. Затем я разрезал его пополам, чтобы получить настоящую середину. Мне также нужна фактическая высота строки текстовой области, и я также разрезаю ее пополам, чтобы вычесть, чтобы получить фактическую верхнюю часть того места, где я хочу, чтобы текстовая область была. Установка paddingTop на это значение выглядит хорошо.

person mateotherock    schedule 03.04.2019