Trouble with elm-ui

Learn
1

I followed along with a slack like example on this website and I started to add some features to it.
https://korban.net/posts/elm/2019-11-17-elm-ui-introduction/

image
image.png1918×954 33.5 KB

One of the things I added was the ability to add messages. I’m having trouble with sizing though. Below is how I am setting up the panel with messages in it. From my understanding I would’ve thought that if I set the height to fill in the main column of messagepanel he message panel would show only the messages that it can fit and you would have to scroll through the message panel to see the rest. What it ends up happening is it pushes the box to add messages off screen and I have to scroll down the whole screen to see it

image
image.png1889×958 30.8 KB

When I use hard code the value and use width px 970 I get the expected outcome where the addmessage part is still there and I can scroll through the message panel but, of course this doesn’t work with different resolutions/browsers. So I’m not sure how I would go about making this work.

    messageEntry message =
      column [ width fill, Element.spacingXY 0 5 ]
            [ row [ Element.spacingXY 10 0 ]
                [ el [ Element.Font.bold ] <| Element.text message.author, Element.text message.time ]
            , Element.paragraph [] [ Element.text message.text ]
            ]
    
    messagePanel =
        column [Element.paddingXY 10 0, Element.spacingXY 0 0, height  (px 970)][
            column [Element.spacingXY 0 20, Element.scrollbarY ] <|
                List.map messageEntry messages
        ]
2

If you add “height fill” and “scrollbarY or scrollbars” to all parents of where you actually want the scrollbar it will always work. Even with no “hardcoded” height… (Remember to also add it to the Element.layout)
If you make an ellie I can show you.

2 Likes
3

Scrollbars is probably one of the few things not 100% great in elm-ui. It just requires some extra work sometimes with dynamically sized elements. The rest of elm-ui is phenomenal! :slight_smile: I belive @mdgriffith (the author) already has plans to improve scrollbars in the next elm-ui version.

1 Like
4

Yes that fixed it thank you! if you can tell from the images above the message with all k’s does the same thing with the x axis. I have buttons on the top right that got pushed off screen since they are right aligned. I’m guessing this is because I’m missing a width fill in a parent too? Why does it have a scrollbar in the x axis if I did not set one? If this does not make sense I can make an ellie for you tomorrow

5

Would be easier for me to understand with an ellie. But you should definetly have “width fill” in your Element.layout. If you see something unexpected with alignment of an element you can add “Element.explain Debug.todo” and it will draw borders around the elements for you. It is then often obvious what is wrong.

I guess both your messagepanel columns and messageItem row + maybe the paragraph should also have “width fill”, as you want them to take up available space… but it does not need scrollbarX or anything as the paragraph will wrap your text.

Tip: in a column or row you do not need “spacingXY valX valY” , “spacing val” is enough…

2 Likes
6

Wow I wish I would’ve known about Element.explain before! Thank you so much all of this has been very helpful.

7

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