Ion-input floating label not centered vertically

[oskarkarol]

Hi, im using the ion-input component with this configuration:

<ion-input label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>

Just like in the Documentation:

ion-input | Ionic Documentation

My issue is that the Floating Label (unfocused) isn’t vertically centered.

Also the Colors are different, the Input color is Grey instead of Black Like In the Documentation.

I fixed this by applying custom Styling but should this even be nessesary?

How do i fix the (unfocused) Floating Label Alignment?

The (focused) Floating Label Alignment is fine.

Thanks in advance for awnsering.

[twestrick]

That is odd! Have you double-checked DevTools to see if there are any custom styles being applied overriding Ionic’s?

Otherwise, can you provide a StackBlitz showing the issue? As you said, the Ionic example works as expected

[oskarkarol]

Hi, thank you for helping!!

I found the issue, but ran into another (similar) one.

I originally placed the ion-input above nested inside of ion-card and ion-card-content like this because i liked the provided padding it gave:

    <ion-card>
      <ion-card-content>
        <ion-input
          label="Outline input"
          label-placement="floating"
          fill="outline"
          mode="md"
          placeholder="Enter text"
        ></ion-input>
      </ion-card-content>
    </ion-card>

This caused the Issues with the Colors

To achieve something similar without using ion-card / ion-card-content im now using a div with class ion-padding like this:

  <div class="ion-padding">
    <ion-input
      label="Outline input"
      label-placement="floating"
      fill="outline"
      mode="md"
      placeholder="Enter text"
    ></ion-input>
  </div>

This works fine, colors are fixed now but i ran into another issue:

To make the outlined inputs work you have to force mode=“md” as it says in the documentation

Filled inputs can be used on iOS by setting the input’s mode to md.

ion-input | Ionic Documentation

However, when i do that, the outline does work on IOS, but the (unfocused) label is not centered vertically

I can only reproduce this issue with a IOS Simulator (Web Version, not App) or Physical IOS Device, i cant reproduce it with the IOS Simulator provided by Firefox or Chrime Web Tools

I created a StackBlitz for it but i don’t think that really helps because you cant reproduce the issus there, you have to test it with IOS Simulator on Mac or Physical IOS Device

https://stackblitz.com/~/github.com/oskarkarol/test

Screenshot from IOS Simulator:

Screenshot from Firefox DevTools IOS Simulation (not reproducable)

[twestrick]

Nice! Great work on the details

Did you try just using IonCard without IonCardContent? I only ever use IonCard by itself, never any of the card sub-components. I just tried, though, and the text is still gray. But, you can set the color by using the following:

ion-card {
  --color: #000;
}

Unfortunately I don’t have a Mac to try. It could possibly be a bug in Apple’s web wrapper (WKWebView). Have you tried looking at DevTools for the app running in the simulator? Directions here.

[oskarkarol]

Yeah i looked for a little with apples web inspection on the simulator but couldn’t find the issue at first glance

Should i open a issue on github?

Nesting the ion-input inside of ion-card without ion-card-content results in this (ios simulator):

Label looks vertically centered, but the colors and the border is broken

[twestrick]

@oskarkarol

but the colors and the border is broken

You should be able to set the color to what you want. With the border, I think you just need to add some padding to the ion-card. The card by default has rounded corners so it is cutting off the input border.

In regards to opening an issue, you could but my feeling, being a pretty obscure issue, it probably won’t get addressed soon. I am just a community member so I could be wrong as I don’t speak for the Ionic team.

[oskarkarol]

Thank you, your approach works, but now its broken on the Web Version unfortunately

IOS Simulator:

Web Version:

  <ion-card class="ion-padding">
    <ion-input
      label="Outline input (broken on ios)"
      label-placement="floating"
      fill="outline"
      mode="md"
      placeholder="Enter text"
    ></ion-input>
  </ion-card>

ion-card {
  --color: #000000;
}