Автоподогрев Textarea не работает внутри flex - PullRequest
Новая
       9

Автоподогрев Textarea не работает внутри flex

0 голосов
/ 30 января 2019

Я использую Semantic UI React и ихTextarea имеет свойство autoHeight, которое автоматически расширяет текстовую область при создании новых строк.Это перестает работать, если Textarea обернут Grid.Column, который имеет свойство display: flex. 

<Grid.Column style={{'display':'flex','flex-direction':'column', 'align-items': 'center', 'justify-content': 'center', width={6}>
    <TextArea autoHeight ></TextArea> 
</Grid.Column>

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

1 Ответ

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

Согласно моему комментарию css ниже, работает ли: 

textarea {
  height: 100%;
}

Я открыл ваш пример кода из поля кода и изменил его так: 

<TextArea
    name="itemTopic"
    defaultValue={comparison.a}
    rows={1}
    style={{
    fontSize: "20px",
    textAlign: "center",
    width: "100%",
    height: "100%"
  }}
/>

Так что яудалили autoHeight: потому что он сгенерирует встроенный стиль height: auto и добавил height: 100%.

Это работает, теперь, поскольку все теги textarea будут иметь одинаковую высоту, вы можете добавить minHeigh: 100px // or something кполучить желаемую высоту.

Спасибо

...