search

ionic-team / ionic-v3

The repo for Ionic 3.x. For the latest version of Ionic, please see https://github.com/ionic-team/ionic
Other
127 stars 85 forks source link

Floating ion-label overlay ion-select placeholder #261

Open ionitron-bot[bot] opened 6 years ago

ionitron-bot[bot] commented 6 years ago

Original issue by @NeoLSN on 2017-03-28T03:01:16Z

Ionic version: (check one with "x") [ ] 1.x [X] 2.x

I'm submitting a ... (check one with "x") [X] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: Floating ion-label overlay ion-select placeholder image

Expected behavior: Floating ion-label should not overlay ion-select placeholder

Related code:

<ion-item>
        <ion-label floating color="primary">SSID</ion-label>
        <ion-select [(ngModel)]="selectAp" name="ssidSelect" #ssidSelect="ngModel" placeholder="Please choose" (ngModelChange)="wifiApSelected()">
          <ion-option *ngFor="let ap of wifiAps" [value]="ap">{{ ap.ssid }}</ion-option>
        </ion-select>
      </ion-item>

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.2.2
ios-deploy version: 1.9.1
ios-sim version: 5.0.8
OS: macOS Sierra
Node Version: v6.4.0
Xcode version: Xcode 8.2.1 Build version 8C1002
ReneGustavo commented 5 years ago

One way to solve the problem is:

ion-input, ion-textarea {

    ::placeholder {
      opacity: 0;
    }

    :focus::placeholder {
      opacity: 1;
    }

  }