`maxHeight` property would be great

[lloydwatkin]

`maxHeight` property would be great

[rpearce]

Hey I'm moving around a bit today but can look at this ASAP

…

On Aug 12, 2017, at 01:49, Lloyd Watkin ***@***.***> wrote: — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[lloydwatkin]

Great. If not then I'll need to tackle at some point. Thanks for the library! On 11 Aug 2017 10:19 pm, "Robert Pearce" <notifications@github.com> wrote: Hey I'm moving around a bit today but can look at this ASAP

On Aug 12, 2017, at 01:49, Lloyd Watkin ***@***.***> wrote: — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAQlBhtfAPzTI3zoB0T1Nq2bsmtQDYLnks5sXMVIgaJpZM4O0rgn> .

[rpearce]

Would it be more appropriate to pass a className or style prop that uses CSS max-height to set the value instead?

[rpearce]

@lloydwatkin I just tried this out in the example (note the style prop), and it successfully set a max-height style property on the element (the browser makes it fall back to overflow: auto; i.e., a scrollbar). The same could be accomplished with the textarea classname if it held max-height: 300px.

    <Textarea
      rows="1"
      maxLength="3000"
      className="textarea"
      style={{ maxHeight: '300px' }}
      name="pet[notes]"
      placeholder="Enter additional notes..."
      defaultValue="asdfasdfasdfasdfafdasdf"
      onChange={ handleChange } />

I think using className or style to set a max-height style property should sufficiently solve your problem.

[lloydwatkin]

I was hoping for something that limited the maximum number of rows, which is kind of what you've achieved here but more simplistic (i.e. developer doesn't need to calculate heights etc). I'll see how it goes with this and if not submit a PR. Thanks!

[rpearce]

I'm not sure this library should get in to deriving line-height, font-size, widths, available visible space and any other factors, as the requirements will vary from project to project. If you know your line height for your textarea beforehand, then this is a static value that you should be able to do math with and either pass a maxHeight style prop or set it in the CSS beforehand with max-height.

I think to do this, you can take your line-height for the textarea then multiply that value by n rows to get your max-height (which accepts size units of any type). So if you have line-height: 28px; for textarea and you want maximum 4 rows, then max-height: 112px. Now, this assumes no padding, so that would need to be factored in, as well, based on your values.

I'm happy to help you craft your solution if you need help, but I don't think it belongs in this library.