Elm-ui 1.1.8 scrolling column

[AlanQ]

In the past I have achieved a scrolling column, bounded by a header, a footer, or both, by playing with the attributes until it worked. Much better than this would be to have a minimum working example, that I understood, that I could copy.

@alexkorban posted a Show-and-Tell announcement of his elm-ui patterns with a Chat Layout example. So I decide to distill it down to a minimum working example, and this is what I ended up with:

module Main exposing (..)

import Html exposing (Html)
import Element exposing (..)

main : Html msg
main =
   layout [ height fill ] <|
      row [ height fill ]
          [ chatPanel   
          ]

displayList =  List.map
                  (\i -> el [] <| text <| String.fromInt i)
                  (List.range 100000 100100)

chatPanel : Element msg
chatPanel =
   let
      header = el [] <|
                  text "Header"

      messagePanel =
         -- Workaround: set min height of 0 to override column sizing to content
         column   [  height <| minimum 0 fill
                  ,  scrollbarY
                  ] <|
                  displayList

      footer = el [  alignBottom
                  ,  clipY
                  ] <|
                  text "Footer"
   in
   column [ height fill ]
          [  header
          ,  messagePanel
          ,  footer
          ]

I kept the row inside layout because we probably all have a structure something like that.

I have two questions:

1. What does the height <| minimum 0 fill workaround do? I don’t understand the comment.
2. If I don’t clipY the footer, I end up with a vertical scrollbar over the whole ‘page’.
   a) Why does this happen?
   b) Is there a better solution than clipY?

[lydell]

My favorite way of working with scrollbars is using contain: size:

https://ellie-app.com/vqWdKFSJPzRa1

[AlanQ]

Thank you for your reply, Simon. At first I thought you had added the property in the Ellie that you created — took me a while to realize you hadn’t

I created the following

containSize =    Html.Attributes.property "contain" (Json.Encode.string "size")
              |> htmlAttribute

and have tried it in every attribute list available, but it doesn’t solve the problem.

How should I use contain: size ?
And how is it superior to clipY ?

[lydell]

Oops, sorry. I linked to the wrong Ellie version. Here’s the one I meant: https://ellie-app.com/vqWh8mc8qVLa1

[AlanQ]

Thanks again, Simon.

I’m surprised you’ve put it as a style, as MDN describes it as a property, hence my version.

Unfortunately, your style version doesn’t work (easier to see in Chrome/Chromium as the scrollbars are permanent, unlike Firefox where they are very thin and fade away). And neither does my property version — except in Chromium it’s now worse

And why did you remove alignBottom from the footer?

[lydell]

@AlanQ

I’m surprised you’ve put it as a style, as MDN describes it as a property, hence my version.

Both CSS and JS have properties. You can set a CSS property on an element in Elm using Html.Attributes.style. You can set a JS property on an element in Elm using Html.Attributes.property.

@AlanQ

Unfortunately, your style version doesn’t work (easier to see in Chrome/Chromium as the scrollbars are permanent, unlike Firefox where they are very thin and fade away).

For me, the Ellie looks the same in Chrome and Firefox, and very similar to what it looked like with your original code. I’m not sure what you mean. You probably need to post screenshots of your desired and actual look.

@AlanQ

And neither does my property version — except in Chromium it’s now worse

What I wrote above above CSS and JS properties explains this.

@AlanQ

And why did you remove alignBottom from the footer?

Because it doesn’t do anything. The scrollable area has height fill and pushes the footer down.

[AlanQ]

Screenshots to explain what I want and what I get.

This is what I want.
It’s what I get with the code in my original post in this thread:
with clipY in the footer (but without the unnecessary alignBottom in the footer)

This is what I don’t want.
It is what I get without clipY in the footer: unwanted Y scrollbar over the whole page.

This is also what I don’t want.
It’s what I see in your Ellie, Simon: https://ellie-app.com/vqWh8mc8qVLa1
Thank you, but it doesn’t work for me in desktop (Ubuntu) Chromium or Firefox.
It’s essentially the same as the one above: unwanted Y scrollbar over the whole page.

[lydell]

The useless whole-page scrollbar goes away when I make the example more realistic by adding some padding to the header and footer:

https://ellie-app.com/vrKKX3Yk9Dxa1

My guess is that there’s something funky going on with line-height that overflows a pixel or two when all the boxes are sized exactly to their text. Text is weird in CSS, and elm-ui does a lot of weird stuff to work around that and it’s not perfect.

[AlanQ]

That makes sense. Interestingly, if you remove the footer text, the problem goes away, but if you remove the header text, the problem is still there.

Many thanks for all the effort you’ve put into this, Simon.