iOS floating labels not shown after upgrade to beta.4

Ionic Framework ionic-v3
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?

1 Like
2

Same issue here unfortunately.

3

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

image
Screen Shot 2016-04-08 at 4.16.41 PM.png377×667 24.4 KB

4

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

here’s a screenshot from chrome:

image
Screen Shot 2016-04-09 at 8.41.38 PM.png662×1160 27.7 KB

and one from safari:

image
Screen Shot 2016-04-09 at 8.41.44 PM.png720×1258 40.9 KB

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:

3 Likes