Same row height for all table columns using elm-ui

Question

I cannot figure out how to obtain the same row height for every column when using table or indexedTable in elm-ui. Is this possible (without setting a fixed height) or should I resort to implementing my own table with row and column?

The following ellie illustrates the issue. This is the code used to build the table

bgcolor idx =
    (if modBy 2 idx == 0 then
        gray

     else
        white
    )
        |> Background.color

view model =
    indexedTable []
        { data =
            [ { f1 = "f11", f2 = "f12" }
            , { f1 = "f21", f2 = "f22" }
            , { f1 = "f31", f2 = "f32" }
            , { f1 = "f41", f2 = "f42" }
            ]
        , columns =
            [ { header = text "f1"
              , width = fill
              , view = \idx d -> el [ Font.size 30, bgcolor idx ] <| text d.f1
              }
            , { header = text "f2"
              , width = fill
              , view = \idx d -> el [ Font.size 15, bgcolor idx ] <| text d.f2
              }
            ]
        }
        |> layout []

Thanks in advance.

Can you give an example of how to accomplish this with plain HTML and CSS? — glennsl, Sep 28 '21 at 16:47
I thought this would output a ``, but it actually does use `grid`. That's pretty silly from a semantic point of view, but that also means it should be feasible, I think, if you can get it to output the right `grid-template-rows` or something. — glennsl, Sep 28 '21 at 16:51

score 1 · Accepted Answer · answered Sep 30 '21 at 18:33

Adding height fill to each cell's attributes fixes your Ellie example:

        , columns =
            [ { header = text "f1"
              , width = fill
              , view =
                    \idx d ->
                        el
                            [ Font.size 30
                            , bgcolor idx
                            , height fill -- NEW!!!
                            ]
                        <|
                            text d.f1

              --
              }
            , { header = text "f2"
              , width = fill
              , view =
                    \idx d ->
                        el
                            [ Font.size 15
                            , bgcolor idx
                            , height fill -- NEW!!!
                            ]
                        <|
                            text d.f2
              }
            ]

Fixed Ellie here.

Same row height for all table columns using elm-ui

1 Answers1