elm-ui
elm-ui copied to clipboard
Input values are no longer centered
Input values are in v1.1.5 top aligned, they used to be centered as per v1.1.0.
https://ellie-app.com/6mxMPpTdJ4ma1
Workaround: add Element.htmlAttribute (Html.Attributes.style "flex" "1")
to the input.
Hello!
So, I'm not entirely clear on what's wrong here. What I'm picking up is that text inputs used to be vertically centered, and now they're not.
Though the current behavior seems to be more consistent with things like el
.
Here's the same ellie, but with an el instead of a text input. https://ellie-app.com/6TkYpFsKrfVa1
Let me know if I'm missing something 😄
@mdgriffith ok, but how to center input values? :) seems like it's not possible without custom css?
Can't you just add centerY
, centerX
?
https://ellie-app.com/6TnPssyThfwa1
The problem is not with centering the input element, but centering the input text/value inside.
Ah, interesting. Isn't that something that you could handle with padding?
Yes, it should be possible by doing some calculations based on the font size and input height. But I think the value should be centered by default because I'd say that for single-line inputs this is always what you want. That's also how html <input>
works.
#unexpected
Element.htmlAttribute (Html.Attributes.style "text-align" "center")
@tonyea This would center the text horizontally (which should also be possible with Element.Font.center
), but the issue is about centering vertically.
I have the same issue. Placeholder text and value are not in the same spot https://ellie-app.com/fGmqTHCtSGSa1 I think we can cheat by playing with the padding.
Workaround: add
Element.htmlAttribute (Html.Attributes.style "flex" "1")
to the input.
Is there a workaround for getting placeholder text to be vertically centered, too? :pray: