Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-26521] iOS: The popover UI has shrunk and also lines are not visible in between few rows on iPad

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2019-02-27T00:08:48.000+0000
Affected Version/sn/a
Fix Version/sRelease 8.0.0, Release 7.5.1
ComponentsiPad
LabelslistView, popover, search
ReporterRiduanul Islam
AssigneeVijay Singh
Created2018-11-05T19:37:16.000+0000
Updated2019-02-27T00:08:51.000+0000

Description

Issue :-1 * Issue description - The popover UI has shrunk and also lines are not visible in between few rows * Screen shot showing the issue – PFA Issue_1.png and Issue_1_screenshot.png * Sample app code – PFA Sample_APP.zip Issue :-2 * Issue description - On searching an item in search bar and selecting a row the, popover stays with blank white background instead of disappearing * Screen shot showing the issue – PFA Issue_2.png * Sample app code – PFA Sample_APP.zip

Attachments

FileDateSize
Health_Condition.png2018-11-12T16:15:17.000+0000725562
Issue_1_screenshot.png2018-11-05T19:33:45.000+0000250389
Issue_1.png2018-11-05T19:33:45.000+0000255871
Issue_2.png2018-11-05T19:33:44.000+0000234289
RC.png2018-11-12T16:15:17.000+0000893678
Sample_APP.zip2018-11-05T19:31:47.000+00008507571
Screen_Shot_2018-11-21_at_1.42.13_PM.png2018-11-29T05:45:34.000+0000367590
widget.js2018-12-03T07:20:39.000+00004371

Comments

  1. Vijay Singh 2018-11-07

    [~rislam] Issue1 - I think you are not seeing the iPad screen in full size. Test it on device. Issue2 - This is issue. Simple test case - 
       var win = Ti.UI.createWindow({backgroundColor: 'white'});
   
   var button = Ti.UI.createButton({title: 'Open Popover!', top : 100});
   button.addEventListener('click', function(e){
       popover.show({ view: button });
   })
   win.add(button);
   
   var contentWindow = Ti.UI.createWindow({
       width : Ti.UI.SIZE,
       height : Ti.UI.SIZE,
       borderColor : '#CCC'
   });
   
   var rows = [];
     for (var i = 0; i < 4; i++) {
       var title = i ? 'Row '+ i : 'Close Window'
       rows.push({ properties: { title:title  , backgroundColor: 'red', searchableText:title}});
     }
   
     var sb = Ti.UI.createSearchBar();
      
     var ls = Ti.UI.createListSection({
       items: rows
     });
      var lv = Ti.UI.createListView({
       sections: [ls],
       searchView: sb,
     });
   
     lv.addEventListener('itemclick', function(e) {
       Ti.API.info('click at index: ' + e.itemIndex);
       popover.hide();
   });
   
   contentWindow.add(lv);
   
   var popover = Ti.UI.iPad.createPopover({
       width:  400,
       height: 220,
       backgroundColor: 'green',
       contentView: contentWindow
   });
   win.open();
  2. Vijay Singh 2018-11-12

    [~rislam] There are following 2 workaround. Check with customer which suits them- 1. Use Ti.UI.iOS.NavigationWindow instead of Ti.UI.Window for property "contentView" of popover. 
       var win = Ti.UI.createWindow({backgroundColor: 'white'});
    
   var button = Ti.UI.createButton({title: 'Open Popover!', top : 100});
   button.addEventListener('click', function(e){
       popover.show({ view: button });
   })
   win.add(button);
    
   var contentWindow = Ti.UI.createWindow({
       width : Ti.UI.SIZE,
       height : Ti.UI.SIZE,
       borderColor : '#CCC'
   });
    
   var rows = [];
     for (var i = 0; i < 4; i++) {
       var title = 'Row '+ i;
       rows.push({ properties: { title:title  , backgroundColor: 'red', searchableText:title}});
     }
    
     var sb = Ti.UI.createSearchBar();
      
     var ls = Ti.UI.createListSection({
       items: rows
     });
      var lv = Ti.UI.createListView({
       sections: [ls],
       searchView: sb,
     });
    
     lv.addEventListener('itemclick', function(e) {
       Ti.API.info('click at index: ' + e.itemIndex);
       popover.hide();
   });
    
   contentWindow.add(lv);
   var navWindow = Ti.UI.iOS.createNavigationWindow({window: contentWindow})
    
   var popover = Ti.UI.iPad.createPopover({
       width:  400,
       height: 220,
       backgroundColor: 'green',
       contentView: navWindow
   });
   win.open();
    2. Use Ti.UI.SearchBar as subview of window rather property of Ti.UI.ListView 
       var win = Ti.UI.createWindow({backgroundColor: 'white'});
    
   var button = Ti.UI.createButton({title: 'Open Popover!', top : 100});
   button.addEventListener('click', function(e){
       popover.show({ view: button });
   })
   win.add(button);
    
   var contentWindow = Ti.UI.createWindow({
       width : Ti.UI.SIZE,
       height : Ti.UI.SIZE,
       borderColor : '#CCC'
   });
    
   var rows = [];
     for (var i = 0; i < 4; i++) {
       var title = 'Row '+ i;
       rows.push({ properties: { title:title  , backgroundColor: 'red', searchableText:title}});
     }
    
     var sb = Ti.UI.createSearchBar({
       top:0,
       height:44,
       barColor:'green',
       showCancel: true,
     });
      
     var ls = Ti.UI.createListSection({
       items: rows
     });
      var lv = Ti.UI.createListView({
       top: 45,
       sections: [ls]
     });
    
     sb.addEventListener('change', function(e){
      lv.searchText = e.value;
     });
   
     lv.addEventListener('itemclick', function(e) {
       Ti.API.info('click at index: ' + e.itemIndex);
       popover.hide();
   });
    
   contentWindow.add(sb); 
   contentWindow.add(lv);
    
   var popover = Ti.UI.iPad.createPopover({
       width:  400,
       height: 220,
       backgroundColor: 'green',
       contentView: contentWindow
   });
   win.open();
  3. Fazlul Haque 2018-11-12

    Hello [~vijaysingh], We have some update from the Customer here. The customer replied: #1: We tested the issue on iPad and can replicate it. Please see attachments !Health_Condition.png|thumbnail! !RC.png|thumbnail! . #2: Thanks for the work around. However, we have 70+ screens and all are form fields that heavily use these drop downs. Making a workaround in all the fields isn't a feasible option for us. Can we have a fix for the issue along with an updated SDK? Thanks
  4. Motiur Rahman 2018-11-17

    [~vijaysingh], Can you check out the customer last update? The first issue still persists with the real device and he needs a fixed SDK for the second issue. Thanks!
  5. Vijay Singh 2018-11-19

    [~morahman] 1. If first issue mean that row height of table view is less, then use 'height' property of row in rowTemplate. e.g. - 
       			var rowTemplate = {
   				properties: { 
   					backgroundColor : '#dbdbdb',
   					height: 44          // Row height
   				},
   				childTemplates: [
   			        {                            // Title 
   			            type: 'Ti.UI.Label',     // Use a label for the title 
   			            bindId: 'title',          // Maps to a custom info property of the item data
   			            properties: {            // Sets the label properties
   							width: Ti.UI.FILL,
   							heigth: Ti.UI.FILL,
   							left: 16
   			            }
   			        }
   			    ]
   			};
    2. On second issue we are still working on.
  6. Vijay Singh 2018-11-20

    PR - https://github.com/appcelerator/titanium_mobile/pull/10481
  7. Rakhi Mitro 2018-11-29

    Hello, Feed back from the customer: 
       
   For issue #1, the issue is resolved. However, the Navigation window is not accepting the height property Ti.UI.SIZE and Ti.UI.FILL .
    Asking the customer to share a screenshot which displays the issue. Will be back here soon. Thanks
  8. Rakhi Mitro 2018-11-29

    [~vijaysingh], Attached the image provided by the customer. Can you please review? The Navigation window is not accepting the height property Ti.UI.SIZE and Ti.UI.FILL.
  9. Samir Mohammed 2018-12-12

    Closing ticket, fix verified in SDK version: 8.0.0.v20181212023313 Test and other information can be found at: https://github.com/appcelerator/titanium_mobile/pull/10481 If customer is till facing issues please feel free to reopen the ticket.
  10. Gary Mathews 2019-02-27

    7_5_X: https://github.com/appcelerator/titanium_mobile/pull/10721

JSON Source