Any containing element of `row > column [scrollbarY]` breaks the `scrollbarY`.

[jhf]

When putting a row > column [scrollbarY] inside any row, column or el, the scrollbar does not show. The SSCCE from Ellie is available here.

Expected behavior There should be a scrollbar for the column, regardless of how it is nested.

Versions

• OS: macOS Mojave 10.14.5
• Browser and version: Safari 12.1.1, Firefox 69.0, Chrome 76.0.3809.132
• Elm Version: 0.19.0
• Elm UI Version: 1.1.5

[jhf]

After testing it seems that when height fill is set in Elm-UI, there should be a corresponding max-height: 100vh; in css, to force the height restriction. At least, when I add Element.htmlAttribute (Html.Attributes.style "max-height" "100vh") the scrollbar displays correctly.

This is shown in ellie here.

That workaround was taken from Stack overflow

Note after testing this: This of course is only correct for this example, where the scrollbar is the entire height. For any kind of composition where there are other elements, it doesn't work correctly.

[Iznaak]

Another workaround that might work for this case is to make sure all ancestor have height fill and the parent of the scrollbarY have clip and flex-shrink 1.

See this ellie here

It seems to work on Chrome, Firefox, and Safari

[jhf]

Thank you @Iznaak - I tried our workaround in our production code, and unfortunately it did not work there. It would have been really practical if we found a workaround that didn't require modification of the parent, neither calculation of the exact height, but alas, so far.

[SandiCat]

I encountered the same problem and the workaround worked, except that I had to put it on the first ancestor row rather than the immediate parent. https://discourse.elm-lang.org/t/elm-ui-parent-element-grows-to-encompass-children-instead-of-scrolling/5032/3

This seems related to the following closed issue: https://github.com/mdgriffith/elm-ui/issues/12

[ronanyeah]

clip on an ancestor row just worked for me. This is the current tree, with siblings taken out: layout > column > row [ clip ] > column > column [ scrollbarY ]

Everything has width + height fill also.

[ronanyeah]

I ran into another situation where I wasn't using a parent row and adding this worked:

|> List.singleton
|> row [ Element.clip, width fill, height fill ]

[tommyengstrom]

I also ran into this issue when trying to have a column with scroll and a button below it. I was able to use style "max-height" "inherit" to get it to work.

https://ellie-app.com/8v7jQ46gWgQa1

I found it weird that style "max-height" "500px" and height fill works as outer limits but height <| px 500 does not.

[tommyengstrom]

Are there some fundamental reasons this is a hard thing to fix? Is the bug being triggered because I did something in the wrong way? The css is weak within my, but I would be willing to help with some guidance.

[alexkorban]

#bug #has-ellie

[zpfaltersack]

Here to do my part... Just spent the better part of the day trying to figure out why exactly none of these solutions were working for me. Finally downgraded 1.1.8 to 1.1.7 and the solutions here started working.

Edit to add: I forgot to mention that I found this issue without 'row' being involved. My visual tree did not include any row elements, it was simplified down to just layout/columns and still didn't work in 1.1.8. Then I downgraded to 1.1.7 and it started working, I added my row elements back in, and it stopped working. At which point I applied the clip/flexbox solution to the row element and it began working again.

[tankorsmash]

I don't understand the logic, but I had the following not using scrollbars (and adding height fill on all three elements didn't work):

column [] [
  el [] <| el [Element.scrollbarY] (someElement)
]

but adding a maximum height on the direct parent made the scrollbars show up (even if height fill didnt). Can't add a minimum of 0 though, otherwise it won't show any content at all.

column [] [
  el [ height (fill |> Element 400) ] <| el [ Element.scrollbarY] (someElement)
]

I don't understand the logic, but I'm glad it worked.

[gkappler]

I also fought with disappearing scroll boxes until I finally tried version 1.1.7 -- and now it works with a minimal height of 0, just as I want it. (I just changed that version number in elm.json).

My outer container

column [ clipY ]

element with scrollbar:

textColumn [ scrollbarY
           , height (maximum 400 shrink)
           ]