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

iOS 11: Scrollview layout error when set window with includeOpaqueBars and extendEdges

    Details

    • Type: Bug
    • Status: Closed
    • Priority: None
    • Resolution: Fixed
    • Affects Version/s: Release 7.0.0, Release 7.0.1
    • Fix Version/s: Release 7.1.0
    • Component/s: iOS
    • Labels:
      None
    • Environment:

      iOS 11 only

    • Sprint:
      2018 Sprint 04 SDK

      Description

      Reproduce

      1. Add following into a default classic project.

      var win1 = Titanium.UI.createWindow({
          backgroundColor: 'blue',
          layout: 'vertical',
          title: 'Window 1',
          includeOpaqueBars: true,
          extendEdges: [Ti.UI.EXTEND_EDGE_TOP]
      });
       
      var win2 = Titanium.UI.createWindow({
          backgroundColor: 'blue',
          layout: 'vertical',
          title: 'Window 2',
          includeOpaqueBars: true,
          extendEdges: [Ti.UI.EXTEND_EDGE_TOP]
      });
       
      var navWin = Titanium.UI.iOS.createNavigationWindow({
          window: win1
      });
       
      var label1 = Ti.UI.createLabel({
         width: '90%',
         text: 'You can see the red of the view extends underneath the navigation bar. This is expected and how it works in android. It works this way only when the entire contents of the scrollview fit on the screen.'
      });
       
      var label2 = Ti.UI.createLabel({
          width: '90%',
          top: 200,
          text: 'On this window the view added to the scrollView has a height larger than the size of the device. When this is the case the view is positioned after the end of the navigation bar. I should not be able to see the green of the scrollview through the navigation bar.'
      });
       
      var scrollView1 = Ti.UI.createScrollView({
          backgroundColor: 'green',
          scrollType: 'vertical',
          layout: 'vertical',
          top: 0
      });
       
      var scrollView2 = Ti.UI.createScrollView({
          backgroundColor: 'green',
          scrollType: 'vertical',
          layout: 'vertical',
          top: 0
      });
       
      var btn = Ti.UI.createButton({
          title: "Open new Window with larger view",
          backgroundColor: '#eee',
          bottom: 50
      });
       
      btn.addEventListener('click', function(){
          navWin.openWindow(win2);
      });
       
      var row = Ti.UI.createView({backgroundColor: 'red', width: Ti.UI.FILL, height: 500});
       
      var largeRow = Ti.UI.createView({backgroundColor: 'red', width: Ti.UI.FILL, height: 4000});
       
      row.add(btn);
      row.add(label1);
      scrollView1.add(row);
      win1.add(scrollView1);
       
      largeRow.add(label2);
      scrollView2.add(largeRow);
      win2.add(scrollView2);
       
      navWin.open();
      

      2. Run the app.Compare the window by clicking the button
      3. You will see the different odd behavior based on the size of its content.

      a. If the height of the contents of the scrollView is less than the height of the device, the layout is as expected (I can see the view through the translucent navigation bar).

      b. If the height of the contents of the scrollView is greater than the height of the device, everything added to the scrollView is positioned below the navigation bar (as if an artificial offset is added to the top property of the view). This requires a view’s top property to be different based on the height of the scrollView.

      Note

      iOS only since this is iOS only property.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                vijaysingh Vijay Singh
                Reporter:
                sliang Shuo Liang
                Reviewer:
                Hans Knöchel
              • Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

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

                    Git Source Code