elm-ui icon indicating copy to clipboard operation
elm-ui copied to clipboard

Input values are no longer centered

Open smucode opened this issue 5 years ago • 12 comments

Input values are in v1.1.5 top aligned, they used to be centered as per v1.1.0.

image

https://ellie-app.com/6mxMPpTdJ4ma1

smucode avatar Aug 12 '19 09:08 smucode

Workaround: add Element.htmlAttribute (Html.Attributes.style "flex" "1") to the input.

edkv avatar Aug 14 '19 09:08 edkv

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 avatar Oct 11 '19 15:10 mdgriffith

@mdgriffith ok, but how to center input values? :) seems like it's not possible without custom css?

edkv avatar Oct 11 '19 16:10 edkv

Can't you just add centerY, centerX? https://ellie-app.com/6TnPssyThfwa1

mdgriffith avatar Oct 11 '19 16:10 mdgriffith

The problem is not with centering the input element, but centering the input text/value inside.

edkv avatar Oct 11 '19 17:10 edkv

Ah, interesting. Isn't that something that you could handle with padding?

mdgriffith avatar Oct 11 '19 17:10 mdgriffith

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.

edkv avatar Oct 12 '19 10:10 edkv

#unexpected

alexkorban avatar Apr 30 '20 02:04 alexkorban

Element.htmlAttribute (Html.Attributes.style "text-align" "center")

tonyea avatar Sep 28 '20 23:09 tonyea

@tonyea This would center the text horizontally (which should also be possible with Element.Font.center), but the issue is about centering vertically.

edkv avatar Sep 29 '20 10:09 edkv

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.

Canadadry avatar Oct 26 '21 14:10 Canadadry

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:

mitchellwrosen avatar Mar 10 '22 02:03 mitchellwrosen