Floating ion-label how to make work with border

Ionic Framework
1

I just downloaded the b1 of ionic 6 and am trying to get floating labels working like the example in the blog for the material design about 3/4 down.

Does anyone have a working example?

What I can’t get working is the border around the component that looks like the example and where the label merges with the border when selected. Figure I’m doing something super simple wrong.

Code is basic:

<ion-item>
    <ion-label position="floating">Email</ion-label>
    <ion-input ></ion-input>
</ion-item>

Any working example would be awesome.

Thanks,
Chris…

2

Hey Chris, how are you testing this?

3

In a web browser (chrome latest version).

Did you mean something else?

4

Can you try to set fill: 'outline' on the <ion-input>?

5

Didn’t work. Assuming I did it right, I now have this code in the blank starter app.

home.page.html

<ion-content >
  <ion-list>
    <ion-item>
      <ion-label position="floating">Label 1</ion-label>
      <ion-input></ion-input>
    </ion-item>
  </ion-list>
</ion-content>

home.page.scss

ion-input {
  fill: 'outline';
}
6

not in scss in html:

<ion-content >
  <ion-list>
    <ion-item>
      <ion-label position="floating">Label 1</ion-label>
      <ion-input fill="outline"></ion-input>
    </ion-item>
  </ion-list>
</ion-content>
7

Just tried and that didn’t work. No border.

Does it work for you?

8

It’s from the PR: feat(item): add helper text, error text, counter, shape, and fill mode by willmartindev · Pull Request #23354 · ionic-team/ionic-framework · GitHub

9

This PR added this functionality, are you sure you are testing in md mode?

10

Maybe that is the problem.

How do I test in md mode?

I’m on Windows 10 using Chrome and didn’t set a specific mode. I thought everything but iOS was md - but could be mistaken.

11

inspect the html and check id the input has class “ios” or “md”

12

md mode

<html lang="en" class="plt-mobile plt-mobileweb md hydrated" mode="md>
13

please post the output of ionic info

14

C:\IonicV6Beta>ionic info

Ionic:

Ionic CLI : 6.16.3
Ionic Framework : @ionic/angular 6.0.0-beta.1
@angular-devkit/build-angular : 12.1.1
@angular-devkit/schematics : 12.1.1
@angular/cli : 12.1.1
@ionic/angular-toolkit : 4.0.0

Utility:

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

System:

NodeJS : v14.17.2 (C:\Program Files\nodejs\node.exe)
npm : 6.14.13
OS : Windows 10

15

How does your input look at the moment?

16

Here is the package json:

{
  "name": "IonicV6Beta",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^12.1.1",
    "@angular/core": "^12.1.1",
    "@angular/forms": "^12.1.1",
    "@angular/platform-browser": "^12.1.1",
    "@angular/platform-browser-dynamic": "^12.1.1",
    "@angular/router": "^12.1.1",
    "@ionic/angular": "6.0.0-beta.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^12.1.1",
    "@angular/cli": "^12.1.1",
    "@angular/compiler": "^12.1.1",
    "@angular/compiler-cli": "^12.1.1",
    "@angular/language-service": "^12.1.1",
    "@ionic/angular-toolkit": "4.0.0",
    "@ionic/cli": "^6.16.3",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.7.1",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.2.4"
  },
  "description": "An Ionic project"
}
17

input
input963×636 17 KB

18

here is the screen with some text in the input box
input2

19

Sorry i was wrong, the fill attribute is not on the input, it is on the item:

<ion-content >
  <ion-list>
    <ion-item fill="outline">
      <ion-label position="floating">Label 1</ion-label>
      <ion-input></ion-input>
    </ion-item>
  </ion-list>
</ion-content>
1 Like
20

Thank you - that works perfectly!

Question - is there a plan to have this work in iOS by the time of the final release?