Skip to content

Instantly share code, notes, and snippets.

@PascalLeMerrer
Created February 18, 2021 17:36
Show Gist options
  • Save PascalLeMerrer/0e3074a889ebb5bdbc3b99d602638d95 to your computer and use it in GitHub Desktop.
Save PascalLeMerrer/0e3074a889ebb5bdbc3b99d602638d95 to your computer and use it in GitHub Desktop.
Custom container in Elm Infinite List
infiniteListConfig : State a -> IL.Config (Item a) (Msg a)
infiniteListConfig state =
IL.config
{ itemView = viewRow state
, itemHeight = IL.withConstantHeight state.config.lineHeight
, containerHeight = Basics.round state.containerHeight
}
|> IL.withOffset 300
|> IL.withCustomContainer customContainer
customContainer : List ( String, String ) -> List (Html.Html msg) -> Html.Html msg
customContainer styles children =
Html.div
[ Html.Attributes.style "margin" "0px"
, Html.Attributes.style "padding" "0px"
, Html.Attributes.style "box-sizing" "border-box"
, Html.Attributes.style "display" "flex"
, Html.Attributes.style "flex-direction" "column"
, Html.Attributes.style "background-color" "#ffdf2a"
-- to fill all remaining height
, Html.Attributes.style "flex" "2"
, Html.Attributes.style "width" "100%"
]
children
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment