[TIMOB-16865] Android / MobileWeb: Unable to remove the TableView row separators even if the color is set to transparent

GitHub Issue	n/a
Type	Improvement
Priority	Low
Status	Closed
Resolution	Fixed
Resolution Date	2015-12-10T03:18:39.000+0000
Affected Version/s	n/a
Fix Version/s	Release 5.2.0
Components	Android
Labels	n/a
Reporter	Bert Grantges
Assignee	Hieu Pham
Created	2014-04-18T15:34:12.000+0000
Updated	2016-02-18T08:13:12.000+0000

Description

I have a tableview where I would like to remove the tableview row separators completely. However, setting the separatorColor to transparent on Android (or on MobileWeb setting the separatorStyle to NONE) only hides the separator - it does not remove it. iOS by contrast actually removes the separator all together and allows the tableViewRow to take up the full expected real estate. See screenshot for comparisons.

Attachments

File	Date	Size
Screen Shot 2014-04-18 at 12.26.11 AM.png	2014-04-18T15:34:12.000+0000	260342
Screen Shot 2014-04-18 at 9.48.35 AM.png	2014-04-18T15:34:12.000+0000	115040

Comments

Bert Grantges 2014-04-18

This is possible - and there is a native module out there to remove the separator (http://exygy.com/titanium-remove-tablewview-separators-android/) - however this should be included in our platform.

Andrey Tkachenko 2015-11-30

PR: https://github.com/appcelerator/titanium_mobile/pull/7514 I can't reproduce this issue with MobileWeb.

   var win = Ti.UI.createWindow();
   
   var sectionFruit = Ti.UI.createTableViewSection({ headerTitle: 'Fruit' });
   sectionFruit.add(Ti.UI.createTableViewRow({ title: 'Apples', color: "#ffffff" }));
   sectionFruit.add(Ti.UI.createTableViewRow({ title: 'Bananas', color: "#ffffff" }));
   
   var sectionVeg = Ti.UI.createTableViewSection({ headerTitle: 'Vegetables' });
   sectionVeg.add(Ti.UI.createTableViewRow({ title: 'Carrots', color: "#ffffff" }));
   sectionVeg.add(Ti.UI.createTableViewRow({ title: 'Potatoes', color: "#ffffff" }));
   
   var table = Ti.UI.createTableView({
     data: [sectionFruit, sectionVeg],
     backgroundColor: "#000000"  
   });
   
   if(Ti.Platform.osname == 'android') {
   	table.separatorStyle = Ti.UI.TableViewSeparatorStyle.NONE;
   } else if(Ti.Platform.osname == 'iphone') {
   	table.separatorStyle = Ti.UI.iPhone.TableViewSeparatorStyle.NONE;
   } else if(Ti.Platform.osname == 'mobileweb') {
   	table.separatorStyle = Ti.UI.MobileWeb.TableViewSeparatorStyle.NONE;
   } 
   
   win.add(table);
   win.open();

Hieu Pham 2015-12-10

master PR: https://github.com/appcelerator/titanium_mobile/pull/7564 testing code:

   var win = Ti.UI.createWindow();
    
   var sectionFruit = Ti.UI.createTableViewSection({ headerTitle: 'Fruit' });
   sectionFruit.add(Ti.UI.createTableViewRow({ title: 'Apples', color: "#ffffff" }));
   sectionFruit.add(Ti.UI.createTableViewRow({ title: 'Bananas', color: "#ffffff" }));
    
   var sectionVeg = Ti.UI.createTableViewSection({ headerTitle: 'Vegetables' });
   sectionVeg.add(Ti.UI.createTableViewRow({ title: 'Carrots', color: "#ffffff" }));
   sectionVeg.add(Ti.UI.createTableViewRow({ title: 'Potatoes', color: "#ffffff" }));
    
   var table = Ti.UI.createTableView({
     data: [sectionFruit, sectionVeg],
     backgroundColor: "#000000",
     separatorColor: "blue",
     separatorStyle: Ti.UI.TABLE_VIEW_SEPARATOR_STYLE_NONE
   });
    
    
   win.add(table);
   win.open();

Ashraf Abu 2015-12-10

Master PR merged. Doc update PR: https://github.com/appcelerator/titanium_mobile/pull/7565
Ashraf Abu 2015-12-10

Doc PR merged.
Lokesh Choudhary 2016-01-15

Verified the implementation. Ti.UI.TABLE_VIEW_SEPARATOR_STYLE_NONE & Ti.UI.TABLE_VIEW_SEPARATOR_SINGLE_LINE works as expected. Closing. Environment: Appc Studio : 4.5.0.201601131150 Ti SDK : 5.2.0.v20160114021251 Ti CLI : 5.0.5 Alloy : 1.7.26 MAC Yosemite : 10.10.5 Appc NPM : 4.2.2 Appc CLI : 5.1.0 Node: v0.12.27 Nexus 6P - Android 6.0 Galaxy S4 - Android 4.4.4
Andrey Tkachenko 2016-02-18

Why we can't make same flags for all platform same way?

JSON Source