bug: Wrong icon position on item input floating labels.

[infacto]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

The icon is not centered when using floating labels. It looks ugly.

Demo on CodePen (latest Ionic CDN)

Expected Behavior

Centered icon.

Steps to Reproduce

<ion-item>
  <ion-icon slot="start" name="bug"></ion-icon>
  <ion-label position="floating">Name</ion-label>
  <ion-input type="text"></ion-input>
</ion-item>

Workaround:

ion-icon {
  align-self: center;
}

[sean-perkins]

Hello @infacto thanks for reporting this issue!

I noticed you marked this as an issue in v5, but the CodePen will be using the latest/v6 and also confirms this issue. We do not intend to backfill bug fixes that aren't critical into v5.x. Can I update your issue to reference v6?

I agree the vertical alignment of the icon is jarring when using floating labels. In your opinion, should center alignment apply to all contents of this slot or just icons? While icons are the most common slotted component, I am cautious that changing the alignment for all contents of the slot could negatively impact implementations that are slotting a component that they intend to be aligned to the top of the item's container.

Can you open a separate issue for the ripple effect?

[sean-perkins]

@infacto I spoke with the team, the reason for the "missing" ripple effect, is the lack of ion-app.

If you update your example to include:

<ion-app>
  <!-- Existing HTML template -->
</ion-app>

You will see the ripple when clicking the buttons.

[infacto]

Thanks. Yes it's Ionic 5 and 6. Since I have a workaround, it's no problem to only fix that in Ionic 6. But yes, it's an open question whether and how to fix it. Btw. it's only about the slotted icon. It can be limited to this selector (icon only).

But is center the best solution here? Maybe for some cases and there's no accounting for taste. What's about greater item height? Should the icon stick on the top or center? It's maybe better to keep the icon on top. It's not really the problem of center. It's just the case with floating labels which increases the item height and the icons margin do not grow. In other words - without caring about css - the icon should be centered on the item min/default height only. Keep on top if the item height increases.

Compared to the default item label.	Check the height with the inspector.

Two solutions. Center icon or keep on top with margin depending on height.

See demo.

The original icon position (without my workarounds) looks better on textarea but looks a bit ugly on other items with standard height and floating labels. Idk, you can close this issue if you want. It's ok for me. I just wanted to show an issue. But currently have no solution for it. In my case I just use my workarounds. Ok the textarea is also a bit "special". Look to the space between label and value, etc. Anyway... Do want you want. Feel free to close this now.

[sean-perkins]

Thanks for the follow-up!

I wonder the same thing, regarding the alignment behaviors as it relates to different controls (single line, multi-line and auto-grow).

My initial thoughts is this may be an implementation detail/documentation problem to address. Since the content is slotted, developers can apply global styles/classes to the element to apply the alignment that works best for their implementation. It could also be possible that Ionic reflects classes to ion-item that helps determine the alignment based on the input/textarea and updates accordingly.

There's an existing issue reported that overlaps this (#18681), we will track in favor of this issue.

Thank you!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.