# Get scrollHeight attribute from Textarea field

**URL:** <https://discourse.elm-lang.org/t/get-scrollheight-attribute-from-textarea-field/1693>\
**Category:** Learn\
**Created:** [August 22, 2018, 2:22pm UTC](https://discourse.elm-lang.org/t/get-scrollheight-attribute-from-textarea-field/1693 "2018-08-22T14:22:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![s3k](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/s3k/32/1193_2.png) [@s3k](https://discourse.elm-lang.org/u/s3k)\
**Post date:** [August 22, 2018, 2:22pm UTC](https://discourse.elm-lang.org/t/get-scrollheight-attribute-from-textarea-field/1693/1 "2018-08-22T14:22:46Z")

</div>

Hi guys,

I’m trying to build autoresizable textarea (by height)  
and I’m stuck with getting a **scrollHeight** attribute from textarea field.

Regular js code look’s like this:

```
function getScrollHeight(id) {
     textareaObj = document.getElementById(id);
     var scrollH = textareaObj.scrollHeight;
     alert(scrollH);
}

```

How can I do the same in ELM?  
Should I use custom JSON decoder for Html.Events.on event?

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [August 22, 2018, 4:46pm UTC](https://discourse.elm-lang.org/t/get-scrollheight-attribute-from-textarea-field/1693/2 "2018-08-22T16:46:53Z")

</div>

With Elm 0.19, look at [`getViewportOf`](https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom#getViewportOf) from the new [`Browser`](https://package.elm-lang.org/packages/elm/browser/latest/Browser) package, it’s a task returning a [`Viewport`](https://package.elm-lang.org/packages/elm/browser/latest/Browser-Dom#Viewport) on success where:

```auto
scene.height = scrollHeight

```

---

<div class="post-metadata">

**Author:** ![s3k](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/s3k/32/1193_2.png) [@s3k](https://discourse.elm-lang.org/u/s3k)\
**Post date:** [August 22, 2018, 5:13pm UTC](https://discourse.elm-lang.org/t/get-scrollheight-attribute-from-textarea-field/1693/3 "2018-08-22T17:13:05Z")

</div>

Thanks, try it right after update from 0.18)

For now, I just want figure out how to do the same in 0.18.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [August 22, 2018, 5:46pm UTC](https://discourse.elm-lang.org/t/get-scrollheight-attribute-from-textarea-field/1693/4 "2018-08-22T17:46:03Z")

</div>

I’m not sure that you can do it exactly as you want without ports in Elm 0.18, but the following package source could help:

> <https://github.com/ohanhi/autoexpand/blob/2.1.1/src/AutoExpand.elm>

---

<div class="post-metadata">

**Author:** ![s3k](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/s3k/32/1193_2.png) [@s3k](https://discourse.elm-lang.org/u/s3k)\
**Post date:** [August 22, 2018, 7:00pm UTC](https://discourse.elm-lang.org/t/get-scrollheight-attribute-from-textarea-field/1693/5 "2018-08-22T19:00:25Z")

</div>

An interesting package, I’ll check it.

**For now I’ve finally got it with the next solution:**

```
view = 
    textarea [getScrollHeight] []

-- Event Handlers

scrollHeightDecoder : Json.Decoder Int
scrollHeightDecoder =
    Json.at ["target", "scrollHeight"] Json.int

getScrollHeight : Attribute Msg
getScrollHeight =
    let
        succ height =
            Json.succeed (ScrollHeight height)
    in
        on "keyup" (Json.andThen succ scrollHeightDecoder)

```

And the equivalent JS code. So, basically elm’s “Html.Events#on” handles a similar “event” object from the code below:

```
  var textarea = document.getElementById("textarea")

  textarea.addEventListener("keyup", function (event) {
    console.log(event.target.scrollHeight)
  }
```

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [August 22, 2018, 7:25pm UTC](https://discourse.elm-lang.org/t/get-scrollheight-attribute-from-textarea-field/1693/6 "2018-08-22T19:25:54Z")

</div>

👍

This is almost what the package does for this part, except it uses `on "input"` and decode `value` at the same time:

```auto
inputDecoder : ConfigInternal msg -> Decoder msg
inputDecoder config =
    map2 (\t s -> config.onInput { textValue = t, state = s })
        (at ["target", "value"] string)
        (at ["target", "scrollHeight"] int
            |> map (State << getRows config)
)

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [September 1, 2018, 7:25pm UTC](https://discourse.elm-lang.org/t/get-scrollheight-attribute-from-textarea-field/1693/7 "2018-09-01T19:25:59Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.