Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-26211

iOS: Percentage based layout rounds floating widths/heights incorrectly

    Details

    • Story Points:
      5
    • Sprint:
      2016 Sprint 17 SDK

      Description

      Summary:
      iOS will incorrectly wrap views within a horizontal layout if their percentage based widths total to 100%. This is not an issue on Android.

      Steps to reproduce:

      1. Build and run HorizontalPercent50x50Test.js on iOS.
      2. Note that the left view width is 50% and the right view width is 50%.
      3. Observe the layout.

      Result:
      On iOS, the right view is wrongly wrapped to the next row.

      Expected Result:
      Both views are expected to be on the same row since they both have a width of 50%. Android does this correctly as seen here...

      Work-Around:
      Use Ti.UI.FILL to the right-most view's width property instead of using a percentage.

      Note:
      The attached HorizontalFillTest.js provides a more complex horizontal layout test. iOS has 2 issues with this as well:

      • The Left (50%) | Right (50%) test shows that the views are wrongly shrunk to 25% width instead of 50%.
      • The yellow (75%) label does not have the same width as the (25%)|(50%) labels above it.

      iOS looks like this...

      Android handles it correctly as can be seen here...

        Attachments

        1. Bildschirmfoto 2018-07-20 um 22.27.03.png
          385 kB
          Hans Knöchel
        2. Bildschirmfoto 2018-07-20 um 22.31.05.png
          1.08 MB
          Hans Knöchel
        3. HorizontaFill-iOS-bad.png
          58 kB
          Joshua Quick
        4. HorizontalFill-Android-good.png
          81 kB
          Joshua Quick
        5. HorizontalFillTest.js
          7 kB
          Joshua Quick
        6. HorizontalPercent50x50Test.js
          0.4 kB
          Joshua Quick
        7. HorizontalPercent-Android-good.png
          30 kB
          Joshua Quick
        8. HorizontalPercent-iOS-bad.png
          22 kB
          Joshua Quick

          Issue Links

            Activity

              People

              • Assignee:
                hknoechel Hans Knöchel
                Reporter:
                jquick Joshua Quick
                Reviewer:
                Joshua Quick
                Tester:
                Keerthi Mahalingam (Inactive)
              • Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Titanium SDK/CLI <> Titanium Mobile
                    Synced with:
                    TIMOB-6460
                    Sync status:
                    ERROR
                    Last received:
                    Last sent:

                    Git Integration