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

iOS: ListView with SearchBar under NavigationWindow with extendEdges fails to position properly.

    Details

    • Story Points:
      13
    • Sprint:
      2017 Sprint 14 SDK

      Description

      The extendEdges property of a window under a NavigationWindow allows the content of the window to extend under a translucent navigation bar, giving an iOS 7 depth effect.

      However, when extendEdges is defined and a SearchBar is added to a ListView the positioning is incorrect. Using contentInsets on the ListView should align the SearchBar to be visible under the navigation bar, but it does not work as expected. It also creates a positioning problem when one clicks the SearchBar to use it, as it gets re-positioned under the navigation bar.

      Expected Behavior:

      When the SearchBar is added to a ListView, it should show below the navigation bar of the window without the need to use contentInsets. It should also remain in position when the user taps on it to enter some search text.

      Test:

      Using the code below, load the app. The initial view (pic 1) shows the SearchBar hidden below the navigation bar.

      Tapping on the status bar at the top, correctly positions the SearchBar below the navigation bar (pic 2).

      Tapping on the search bar to enter text, re-positions the SearchBar again under the navigation bar (pic 3).

      app.js:

      var rows = [];
      for (var i = 0; i < 50; i++) {
          rows.push({ properties: { title: '\u263B Row '+ i }});
      }
       
       
      var win = Ti.UI.createWindow({
      	title: 'TEST',
      	extendEdges: [Ti.UI.EXTEND_EDGE_TOP, Ti.UI.EXTEND_EDGE_BOTTOM],
      	backgroundColor: '#ffffff',
      	navBarHidden: false
      });
       
      var nav = Ti.UI.iOS.createNavigationWindow({ window: win });
       
       
      var sb = Ti.UI.createSearchBar();
       
       
      var ls = Ti.UI.createListSection({
      	items: rows
      });
       
       
      var lv = Ti.UI.createListView({
       	contentInsets: { top: 64, bottom: 60 },
          sections: [ls],
          searchView: sb
      });
       
       
      win.add(lv);
      nav.open();
      

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                vijaysingh Vijay Singh
                Reporter:
                bcproductions Ed
                Reviewer:
                Hans Knöchel
                Tester:
                Eric Wieber
              • Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

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

                    Git Source Code