App rejected because layout truncated

Ionic Framework ionic-v3
#1

Help! :smiley: My app was rejected by apple because some views are truncated on iP 4. I would need it to be able to scroll or get the text automatically re-arrananged .
I assume thatā€™s relatively simple to do, but I just do not know how?

Hereā€™s my code:

<ion-header>
  <ion-navbar>
    <ion-title>Help</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <ion-slides pager>
  <ion-slide *ngFor="let slide of slides">
      <img [src]="slide.image" class="slide-image"/>
      <h2 class="slide-title" [innerHTML]="slide.title"></h2>
      <p [innerHTML]="slide.description"></p>
  </ion-slide>
  <ion-slide>
      <h2 class="slide-title">&nbsp;</h2>
      <h2 class="slide-title">&nbsp;</h2>
      <h2 class="slide-title">&nbsp;</h2>
      <button ion-button large clear icon-right color="primary" (click)="closeHelp()">
        Finish help
        <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </ion-slide>
  </ion-slides>
</ion-content>

And the controller:

this.slides = [
    {
      title: "Welcome!",
      description: "TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT.",
      image: "assets/images/image1.png",
    },
    {
      title: "Help2",
      description: "TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXTTEXT TEXT TEXT TEXT.",
      image: "assets/images/image2.png",
    },....
#2

Could you provide us a screenshot what it looks like now? I hope you donā€™t expect us to rebuild the app from your posted code and test on a iPhone 4 to recreate the problem.

#3

Sure, sorryā€¦
Below are both shots they sent me. Itā€™s simply about the image size and the font size I would guess.
I have no clue how to make the containers responsive to manage img size and text at the same time.

image

1 Like
#4

I am surprised that ionic works on an iPhone4.

Do we have to support it or can we say to Apple we require iPhone5 or above?

#5

@JAR19 Depends off your app, but Ionic itself works on iPhone 4 too.

About your question, you could set a minimal iOS version.
iPhone 4 doesnā€™t support iOS 10 if Iā€™m not wrong.

#6

@elduderino15 how does your app look like when you debug it in chrome and try the different screen resolutions? could you reproduce the problem?

#7

The screen size on iphone 4 is 320 x 480 points
The screen size on iphone 5 is 320 x 568 points

I actually think Apple is trying to help by saying that it does not fit on a iphone 4 - but it does tend to drive the app fit to the smallest screen size - I wonder how many iphone 4 users still exist?

#8

Yes, I tried that and Chrome can reproduce it. Still, I am interested how to fix this in a responsive wayā€¦

From the comments I take that most people here do not consider iP4 for design as I did. I could limit availability of the app to iOS10, since that is not supported by 4s http://iossupportmatrix.com. However, I do not really want to loose users.

#9

What I do not understand is how the difference of 88 pixels can be that significant. Not only does the whole text now fit, it will also add a blank frame maybe 30px in height under the text. It looks like quite a bit of available potential. Could this whole dilemma be due to the fact that Ionic is optimised for iP5 ++ ?

image

#10

I now removed the title row in my help. Looks ok with Chrome at least. The (my?) current xcode release does not list iP4 emulators anymore, just saw that. Ok, you can install legacy simulators, just saw that in xcode settins componentsā€¦

#11

I added iOS 8.1 to xcode to run the simulator and seems that overall compatibility of the layouting mechanisms for ionic are not 100% compatible with 8.1 I ran a test on iP5 with 8.1 and 10.3 and the layout is not consistentā€¦
iP5 iOS 10.3 looking good

image
10.3iP5.png314Ɨ541 4.83 KB

iP5 iOS 8.1 looking no good, see the missplacement of objects, and arrows.

image
8.1iP5.png314Ɨ539 4.73 KB

#12

looks like you did a lot of work @elduderino15, I hope you come a step closer to your solution!

when it comes to iPhone4 and Ionic I personally think that their are compatible. My app is in store and is iPhone4 compatible too.

as @jar19 pointed out, iphone 4 is 320 x 480 points

about how to make responsive, well depends of your html codes. donā€™t know if I could help, but I proceed like this when I face a not understandable css problem: I began to remove all css of the page and then I add piece after piece till I found what part of the code is breaking the page

and if you canā€™t achieve to solve the page in a responsive way, there is still the possibility to detect the screen resolution and to customize it for it. therefore your could for example use the following media queries:

https://paranoida.github.io/sass-mediaqueries/

just some thoughts, hope that could help you

1 Like