# Getting an element's scrollWidth

**URL:** <https://discourse.elm-lang.org/t/getting-an-elements-scrollwidth/8981>\
**Category:** Learn\
**Created:** [March 4, 2023, 2:48am UTC](https://discourse.elm-lang.org/t/getting-an-elements-scrollwidth/8981 "2023-03-04T02:48:43Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![knurt](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@knurt](https://discourse.elm-lang.org/u/knurt)\
**Post date:** [March 4, 2023, 2:48am UTC](https://discourse.elm-lang.org/t/getting-an-elements-scrollwidth/8981/1 "2023-03-04T02:48:43Z")

</div>

Hi!

I’m new to Elm and I’m a bit stuck. I am trying to figure out whether a particular DOM element’s text fits into the element or whether it needs to be scrolled. In JavaScript I can compare the element’s clientWidth and the scrollWidth to do that - the clientWidth tells me how wide the element is, the scrollWidth tells me how wide it should be to show all its contents.

In Elm I seem to have 3 values:

- scene.width
- element.width
- viewport.width

Unfortunately neither of these seem to give me the scrollWidth value from JavaScript.

Is there a way to get this value from within Elm?

---

<div class="post-metadata">

**Author:** ![knurt](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@knurt](https://discourse.elm-lang.org/u/knurt)\
**Post date:** [March 4, 2023, 2:53am UTC](https://discourse.elm-lang.org/t/getting-an-elements-scrollwidth/8981/2 "2023-03-04T02:53:48Z")

</div>

This little program might help illustrate what I’m trying to do:

> module Main exposing (…)
> 
> import Browser  
> import Browser.Dom exposing (Element, Error)  
> import Html exposing (br, button, div, text)  
> import Html.Attributes exposing (id, style)  
> import Html.Events exposing (onClick)  
> import Task
> 
> – MAIN
> 
> main : Program () MyApp Msg  
> main =  
> Browser.element  
> { init = init  
> , update = update  
> , view = view  
> , subscriptions = subscriptions  
> }
> 
> – MODEL
> 
> type alias MyApp =  
> { names : String, width1 : Float, width2 : Float, width3 : Float }
> 
> init : () → ( MyApp, Cmd Msg )  
> init \_ =  
> ( { names = “short text”, width1 = 0, width2 = 0, width3 = 0 }  
> , Browser.Dom.getElement “stop” |\> Task.attempt GotElement  
> )
> 
> – UPDATE
> 
> type Msg  
> = SetText String  
> | GotElement (Result Error Element)
> 
> update msg model =  
> case msg of  
> SetText n →   
> ( { model | names = n }  
> , Browser.Dom.getElement “stop” |\> Task.attempt GotElement  
> )
> 
> ```
> GotElement (Err err) ->
> ( model, Cmd.none )
> 
> GotElement (Ok element) ->
> ( { model
> | width1 = element.scene.width
> , width2 = element.element.width
> , width3 = element.viewport.width
> }
> , Cmd.none
> )
> 
> ```
> 
> – VIEW
> 
> view s =  
> div  
> [ id “stop”  
> , style “width” “100px”  
> , style “overflow” “hidden”  
> , style  
> “white-space”  
> “nowrap”  
> ]  
> [ text s.names  
> , br    
> , text (String.fromFloat s.width1)  
> , br    
> , text (String.fromFloat s.width2)  
> , br    
> , text (String.fromFloat s.width3)  
> , br    
> , button [onClick (SetText “Some much longer text”)] [text “update”]  
> ]
> 
> – SUBSCRIPTIONS
> 
> subscriptions \_ =  
> Sub.none

None of the values that are shown match the scrollWidth as reported when inspecting the “stop” element in JavaScript.

---

<div class="post-metadata">

**Author:** ![AlanQ](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@AlanQ](https://discourse.elm-lang.org/u/AlanQ)\
**Post date:** [March 4, 2023, 2:22pm UTC](https://discourse.elm-lang.org/t/getting-an-elements-scrollwidth/8981/3 "2023-03-04T14:22:21Z")

</div>

Your outer container (`div`) has a fixed width.  
Put the text in a `div` of its own without a fixed width. This inner `div` will/should collapse to the width of the text.  
Give each `div` an `id`.  
Using `Browser.Dom.getElement id` you can measure the width of _each_ `div`.

If the [Html package](https://package.elm-lang.org/packages/elm/html/latest/) doesn’t play nicely using this approach, try [elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/).

If you give the inner `div` a thin border, you can see if it is collapsing to the text as expected.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![knurt](https://avatars.discourse-cdn.com/v4/letter/k/838e76/32.png) [@knurt](https://discourse.elm-lang.org/u/knurt)\
**Post date:** [March 5, 2023, 3:33pm UTC](https://discourse.elm-lang.org/t/getting-an-elements-scrollwidth/8981/4 "2023-03-05T15:33:48Z")

</div>

Oh nice, that does seem to work indeed, even using the Html package.

Thank you very much!

---

<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:** [March 15, 2023, 3:34pm UTC](https://discourse.elm-lang.org/t/getting-an-elements-scrollwidth/8981/5 "2023-03-15T15:34:14Z")

</div>

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