scrollbarX makes the container element disappear.

[bburdette]

Expected behavior

Expected behavior is putting scrollbarX on a container (row or column) causes the content within to scroll horizontally if its too wide, but vertically the container becomes large enough for the content to be rendered without a Y scrollbar.

What happens instead is I get an element with (I guess?) zero height.

My specific case is I want to have a block of text that gets a horizontal scrollbar if its too wide, but all the text is visible in the vertical direction.

Here's an ellie: https://ellie-app.com/dQsCwnPHmwDa1

Versions

• OS: nixos
• Browser: ff, chrome
• Browser Version
• Elm Version 0.19.1
• Elm UI Version 1.1.8

[dabl34]

I had the same issue and manage to fix it. Not sure but, it looks like you need two things:

• to wrap your element with a row for scrollbarX (or column for scrollbarY)
• to have a width with maximum fill as attribute of your element

row [height fill, width fill]
[
    el [ scrollbarX, width (fill |> maximum 700) ] (text "longstring")
]

Here is what I have that works in my app:

        CodeBlock Indented codeStr ->
            [ E.row [ E.width E.fill, E.height E.fill ]
                [ E.el
                    [ E.paddingEach { top = 0, bottom = 0, right = 0, left = 24 }
                    , Background.color Styles.color.lightGrey
                    , E.paddingXY 20 15
                    , E.width (E.fill |> E.maximum 700)
                    , E.scrollbarX
                    , Font.family [ Font.monospace ]
                    ]
                    (E.text codeStr)
                ]
            ]