0

I'm using Semantic UI React and theirTextarea has a autoHeight property that auto expands the text area as you create new lines. This stops working if the Textarea is wrapped by a Grid.Column which has a display: flex property.

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

Basically I wanted a text box that's vertically aligned and autoexpands as more lines are added but seems I can either autoexpand it or have it vertically aligned, haven't been able to get both.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Codecollector
  • 1
  • Have you tried css `textarea{ height: 100% }` – T04435 Jan 29 '19 at 23:25
  • Just tried it, doesn't work unfortunately. – Codecollector Jan 30 '19 at 08:34
  • COuld you provide the rendered HTML sample of your code. – T04435 Jan 30 '19 at 22:41
  • Please see for what I mean here: https://codesandbox.io/s/mzkvn1451j The first column I've applied the flex to and it allows me to keep the textbox vertically aligned, but problem is that the textbox no longer expands as new lines are added). The third column meanwhile doesn't have the display:flex (so it's not vertically aligned) but it does auto expand as you add lines. – Codecollector Feb 01 '19 at 16:34

1 Answers1

0

As per my comment the css below, does work:

textarea {
  height: 100%;
}

I have open your sample code from code box and modified to look like this:

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

So I have removed autoHeight: cause it will generate an inline style of height: auto and added height: 100%.

That works, now as all textarea tags will have the same height you might want to add a minHeigh: 100px // or something to get the height you want.

Thanks

T04435
  • 12,507
  • 5
  • 54
  • 54
  • I don't want the textbox to grow based on another column's text box growing. The text box should only grow if it, itself, has extra lines added. The textbox should stay the same size,so just one row if it only has one line of text...but lets say another textbox is 10 lines, then the 1 line textbox in another column should be veritically aligned so there's equal space above and below it. – Codecollector Feb 05 '19 at 14:07