iOS floating labels not shown after upgrade to beta.4


#1

I just upgraded to beta.4 and noticed my floating labels on forms no longer display. I’m thinking it might be related to a recent change?


"ion-label stacked" hidden on safari 9
#2

Same issue here unfortunately.


#3

I’m not seeing this in our e2e tests, can you provide some code, please?


#4

Hi Brandy, I created a gist with the template code of my login screen.

here’s a screenshot from chrome:

and one from safari:


#5

Oh I didn’t realize it was on Safari, sorry! Could you please create an issue for it on our repo and I’ll look into it? https://github.com/driftyco/ionic/issues

Thanks! :slight_smile:


#6

Sure, no problem!

I assume iOS uses the safari rendering engine exclusively… :wink:


#7

I also have the same issue


#8

Thanks for bringing this to our attention! This will be fixed with the release of 2.0.0-beta.5.

As a temporary workaround until then, you can add the following css to your app (after the Ionic import):

ion-label[stacked],
ion-label[floating] {
  flex-basis: auto;
}

For example, you could have a global Sass file at theme/app.global.scss containing the above css, and then import that file in your theme/app.core.scss file:

// App Shared Imports
// --------------------------------------------------
// These are the various page imports which make up this app.
// By default each design mode includes these shared imports.
// App Shared Sass variables belong in app.variables.scss.

@import "./app.global";

Let me know if you find any issues. :smile: