Windows phone 8 design issues

ionic-v1
1

Hello Ionic geeks,
I had developed android app using ionic and which works great. Now i am developing same app for windows phone 8. All design looks worse. Some main problems are:

  • Icons are not showing…just box is displayed instead of icon.
  • when i pull down contents it does not goes to it’s default location as in ios and android.

Thanks,
Lomas Joshi

2

Hey Lomas,

ionic gives no windows phone (IE mobile) support in the beta phase. :wink:

mobile IE does not support the icon-font correctly, thats why you see “boxes” instead of icons.

Greets, bengtler

3

Hello bengtler,
Thanks for your reply.
But i am surprised that is there any way to hack ionic for the below point.

  • “when i pull down contents it does not goes to it’s default location as in ios and android.”

Thanks,
Lomas Joshi

4

Yeah, because maybe css or javascript is not IE optimized/supported or maybe your css code is not IE compatible.

But a ionic guy may clearify that (if they want ^^).

So maybe we have luck and get ie mobile support with the final version

5

We’ve had the same issues, but now we have a fairly smooth running windows phone and windows 8 ionic app. The most important fixes were:

1: Loading fonts from local filesystem don’t work, but loading from a CDN does: [WP8] Ionicons not display

2: Set overflow-scroll="true" on your <ion-content> to disable Ionic’s virtual scrolling (which is clearly not designed to work with IE) and use IE’s native webscrolling

3: Stick with beta6 because the latest version enables page-animations, which are clearly not designed with IE support in mind. Or maybe you can use beta8 with that animation disabled, but I haven’t tried that.

Good luck and let me know if you run into any other problems, because I’ve probably had the same problem :smile:

3 Likes
6

Hello dj_hoek,
i would like to thanks you for your great reply.
I am able to fix my scrolling issue as you suggest, and it works great.
Icons also works file if i use online link to stylesheet.

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/1.4.1/css/ionicons.min.css">

but unfortunately i cannot load css from CDN as my app should work on offline mode.

Any solutions for this??

Thanks,
Lomas Joshi

7

You’re welcome :slight_smile: That issue with IE not being able to load fonts from filesystem is a nasty one. I’ve pretty much settled with icons only working when you’re online, sad but true. I think we have 2 options:

  1. Wait for IE to get this issue fixed
  2. Customize Ionic’s css so it refers to png-images instead of fonts

But I wouldn’t know exactly where to start on the second option.

Maybe you’ll find this thread useful. Someone in that thread references to this one offering a solution, for which someone created a sample app here.

1 Like
8

Thanks dj_hoek,

I fixed the issue by using bootstrap 2 icons as it uses png-images instead of fonts.

Regards,
Lomas Joshi

9

The icon issue can be fixed by embedding the font file as base64 in the css directly.
An example and more tips for Windows Phone 8 optimizations can be found at http://appfoundry.be/blog/2014/10/16/ionic-windows-phone/

Let’s hope Windows Phone support comes soon.

Cheers