search

mdgriffith / style-elements

Create styles that don't mysteriously break!
http://package.elm-lang.org/packages/mdgriffith/style-elements/latest
BSD 3-Clause "New" or "Revised" License
445 stars 49 forks source link

`el`s with `width fill, maxWidth (px x)` cannot be `center`ed #125

Open benthomasveeva opened 6 years ago

benthomasveeva commented 6 years ago

The big picture of what I'm trying to do

I am trying to center an element that has some size constraints. The element should be as large as it can, with a maximum width of X pixels (300 in the Ellie demo). This allows it to shrink on small screens, or when there are lots of neighbors, but be big otherwise.

What I did

https://ellie-app.com/4hVvVyzgVa1/0 The Ellie uses a green background to make it easy to tell where the el is. In short: el Background [center, width fill, maxWidth (px 300)]

What I Expected To Happen

I expected the el (the green block) to be centered and 300 pixels wide, shrinking when you shrink the screen.

What Actually Happened

The el is left-aligned and 300 pixels wide, and does properly shrink when the screen is shrunk.

If width fill is omitted or changed to width content, then the el is centered properly. To be clear, I am not talking about the text being centered within the green block, I am talking about the green block being centered on the screen. Because I am talking about the centering of the el itself, and not of the text within the el, I believe that this is a separate thing from what Richard is talking about in #101.

width (fillPortion 1) has the same behavior as width fill.

I speculate that the maxWidth attribute is not necessary for the center attribute to be stomped by the width fill, but it is only when all three are present that you can tell that this has happened.

Versions

j-maas commented 6 years ago

If I understand the code correctly, this is because content is set to Length Auto, which is translated to width: auto.

A future solution would be to map it to width: fit-content, which is currently experimental. In the meantime, a workaround would be to use vendor-attributes.