Skip to content

bug: input floating label is always floating when using start/end slots #28665

Open
@rulaman123

Description

@rulaman123

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

ion-input with labelPlacement="floating" not working as intended with slotted ion-button inside. The label is fixed on top even with pristine input.

input bug

The label of the first ion-input without slotted button is correct.

Expected Behavior

When ion-input has or loses focus the label should change its position.

Steps to Reproduce

  1. create an ion-input wit labelPlacement="floating"
  2. create an ion-button with slot="end" inside

Code Reproduction URL

No response

Ionic Info

Ionic:
Ionic CLI : 7.1.5
Ionic Framework : @ionic/angular 7.6.0
@angular-devkit/build-angular : 16.2.8
@angular-devkit/schematics : 16.2.8
@angular/cli : 16.2.8
@ionic/angular-toolkit : 10.0.0

Capacitor:
Capacitor CLI : 5.5.1
@capacitor/android : 5.5.1
@capacitor/core : 5.5.1
@capacitor/ios : 5.5.1

Utility:
cordova-res : not installed globally
native-run : 1.7.4

System:
NodeJS : v20.10.0
npm : 10.2.3
OS : Windows 10

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions