Style-elements center not applied

Learn
1

I have the following layout using style elements:

Element.viewport stylesheet <|
  (wrappedRow None
    [ width (percent 100) ]
    [ el Header [ padding 10, width fill, center ]
    ( text "My Header Text")
   ]
   |> below
   [ row None
     [ center ]
     [ column Content 
       [ center, width (px 400), height content ]
       [ el None [] ( text "some content") ]

But all my elements are left aligned rather than centered on the viewport. How do I fix this?

2

Hello and welcome!

So, unfortunately I don’t have a direct answer for you. :confused: But! Here’s what I’d try.

If you’re not already on it, I’d definitely recommend getting on the elm slack, there’s a #style-elements channel where people frequently answer questions like this.

I’d also recommend creating an ellie(https://ellie-app.com/new) with your code when you share it. It’ll make it a ton easier for someone to see what’s actually going on, fiddle with it, and maybe return a fixed version to you.

Good luck!

1 Like
3

I have an ellie here: https://ellie-app.com/V3YwpcY6a1/0

I will try the slack channel again. I’ve asked a few questions there and not gotten much response, probably because my questions are very basic function like this one. I also generally prefer troubleshooting venues that are indexed by search engines so that others can find answers easily later and prevent the same questions being asked repeatedly.

1 Like
4

It looks like the problem is in width (px 400), I think it should be width (percent 100)

Check out https://ellie-app.com/7TPXtjcCHa1/0

1 Like
5

Not quite as that just stretches it across the whole viewport. This ellie from the slack discussion was helpful:
https://ellie-app.com/44kt6kXDma1/0

1 Like