Размер текстовой области внутри CSS сетки - PullRequest
Новая
       4

Размер текстовой области внутри CSS сетки

0 голосов
/ 03 февраля 2020

Я пытаюсь использовать неявную сетку CSS для создания макета для следующей базовой структуры c HTML: 

<div class='row'>
    <textarea></textarea>
    <div></div>
</div>

, где .row div - это CSS сетка с автопотоком, установленным на столбец для автоматического размещения элементов в виде столбцов: 

.row {
  display: grid;
  grid-auto-flow: column;
}

Как и для большинства элементов, я ожидаю, что сетка CSS обеспечит равное пространство для обоих textarea и элементы div вдоль ряда. Но вместо этого макет выглядит следующим образом: layout textarea занимает больше места вдоль строки, чем ожидалось. Когда вы пытаетесь изменить размер textarea, я вижу следующее: resize Здесь, похоже, происходит то, что сетка добавляет дополнительное пространство справа от textarea, равное ширине div справа. Я не могу понять, почему это происходит, и почему элементы изначально не имеют равную ширину. Что мне здесь не хватает?

Я создал простой JSFiddle для проверки этого поведения здесь .

Ответы [ 2 ]

1 голос
/ 03 февраля 2020

почему элементы изначально не имеют равную ширину. Что мне здесь не хватает?

textarea имеет ширину, изначально определенную как cols, которая имеет значение по умолчанию, равное 20

столбцы

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

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

.row {
  display: grid;
  grid-auto-flow: column;
}

.row > div {
  border: 1px dotted;
}
<div class='row'>
    <textarea cols=1></textarea>
    <div></div>
</div>

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

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

Я не знаю ваш реальный вариант использования, но я учту тот факт, что ваша сетка имеет полную ширину страницы (я также рассмотрю значение по умолчанию body margin) 

.row {
  display: grid;
  grid-template-columns:auto 1fr;
}

.row > div {
  border: 1px dotted;
}

textarea {
  width:calc(50vw - 16px);
  box-sizing:border-box;
}
<div class='row'>
    <textarea ></textarea>
    <div></div>
</div>
1 голос
/ 03 февраля 2020

Чтобы сделать их одинакового размера, вам нужно попросить сетку сделать это 

grid-auto-columns:1fr;

Вы можете остановить пользователя, изменяющего размер текстовой области с помощью resize:none

Если вы хотите, чтобы это работало, пока пользователь изменяет размеры, я не могу найти решение css

У меня была идея но я не смог заставить его работать.
Суть была

  • , иметь набор [невидимых] div'ов, так как в первой строке
  • есть функция, которую можно вызывать на элементе сетки, чтобы увидеть, меньше ли его offsetWidth одному из скрытых элементов в том же столбце
  • , если это так, манипулирует css с auto чтобы установить ширину в явном виде для текстовой области для этого столбца, затем с некоторым набором repeat(x, 1fr) (столбцы до текстовой области) и repeat(auto-fill, 1fr) (столбцы после текстовой области)
  • , затем присоедините эту функцию к изменению размера ( или mouseup ) текстовой области

В качестве альтернативы рассмотрим flex.
Это будет иметь противоположную проблему ; это не заставит элемент быть 1fr (и применить это нежелательное заполнение), но я не думаю, что вы можете попросить, чтобы он был размером 1/<number in row> [только в css только].

...