[TIMOB-15086] iOS7: Label clipped in custom TableViewRows including Label

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Duplicate
Resolution Date	2013-10-28T18:20:44.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	iOS
Labels	ios7, listview, tableView, tableViewRow
Reporter	Vincent
Assignee	Blain Hamon
Created	2013-09-08T08:00:53.000+0000
Updated	2017-03-20T22:12:45.000+0000

Description

PROBLEM: If you add a quite long text in iOS 7 in a label, it will cut the text in half by the middle. Check the images. TESTCASE:

var win = Ti.UI.createWindow({fullscreen:true});
 
var table = Ti.UI.createTableView( {rowHeight:60});
 
var createLabel = Ti.UI.createLabel;
var createTableViewRow=  Ti.UI.createTableViewRow;
 
var row1 = createTableViewRow();
var row2 = createTableViewRow();
var row3 = createTableViewRow();
 
 row1.add( 
       [ 
        createLabel({   
            text:'a VERY VERY VERY VERY VERY VERY VERY long name',
            font:{fontSize:14,fontWeight:'bold'},
            width:'auto',
            textAlign:'left',
            top:4,
            left:5,
            height:16,
             
       })
     
    ,
        createLabel({
            color:'gray',
            text:'sub label',
            font:{fontSize:12,fontWeight:'bold'},
            width:'auto',
            textAlign:'left',
            bottom:4,
            left:5,
            height:14,
             
       })
       ,
        
       createLabel({
        text:'label',
        font:{fontSize:12,fontWeight:'bold'},
        width:'60',
        textAlign:'right',
        bottom:4,
        right:4,
        height:14,
        
    })
        
    ]
 
);
 
row2.add( 
       [ 
        createLabel({   
            text:'another VERY VERY VERY VERY VERY VERY VERY long name',
            font:{fontSize:14,fontWeight:'bold'},
            width:'auto',
            textAlign:'left',
            top:4,
            left:5,
            height:16,
             
       })
     
    ,
      
        createLabel({
            color:'gray',
            text:'sub label',
            font:{fontSize:12,fontWeight:'bold'},
            width:'auto',
            textAlign:'left',
            bottom:4,
            left:5,
            height:14,
             
       })
       ,
        
       createLabel({
        text:'label',
        font:{fontSize:12,fontWeight:'bold'},
        width:'60',
        textAlign:'right',
        bottom:4,
        right:4,
        height:14,
        
    })
        
      
    ]
 
);
 
row3.add( 
       [ 
        
        createLabel({   
            text:'rather short name',
            font:{fontSize:14,fontWeight:'bold'},
            width:'auto',
            textAlign:'left',
            top:4,
            left:5,
            height:16,
             
       })   
    ,
        createLabel({
            color:'gray',
            text:'sub label',
            font:{fontSize:12,fontWeight:'bold'},
            width:'auto',
            textAlign:'left',
            bottom:4,
            left:5,
            height:14,
             
       })
       ,  
       createLabel({
        text:'label',
        font:{fontSize:12,fontWeight:'bold'},
        width:'60',
        textAlign:'right',
        bottom:4,
        right:4,
        height:14,
        
    })
        
      
    ]
 
);
 
 
table.data = [row1,row2,row3];
win.add(table);
 
win.open();

Attachments

File	Date	Size
ios6.png	2013-09-08T08:00:53.000+0000	31287
ios7.png	2013-09-08T08:00:53.000+0000	28221

Comments

Vincent 2013-09-08

Test Case

 
   
   var win = Ti.UI.createWindow({fullscreen:true});
   
   var table = Ti.UI.createTableView( {rowHeight:60});
   
   var createLabel = Ti.UI.createLabel;
   var createTableViewRow=  Ti.UI.createTableViewRow;
   
   var row1 = createTableViewRow();
   var row2 = createTableViewRow();
   var row3 = createTableViewRow();
   
    row1.add( 
   	   [ 
   	 	createLabel({	
   			text:'a VERY VERY VERY VERY VERY VERY VERY long name',
   			font:{fontSize:14,fontWeight:'bold'},
   			width:'auto',
   			textAlign:'left',
   			top:4,
   			left:5,
   			height:16,
   			
   	   })
   	
   	,
   	 	createLabel({
   			color:'gray',
   			text:'sub label',
   			font:{fontSize:12,fontWeight:'bold'},
   			width:'auto',
   			textAlign:'left',
   			bottom:4,
   			left:5,
   			height:14,
   			
   	   })
   	   ,
   	   
   	   createLabel({
           text:'label',
           font:{fontSize:12,fontWeight:'bold'},
           width:'60',
           textAlign:'right',
           bottom:4,
           right:4,
           height:14,
          
       })
   	   
       ]
   
   );
   
   row2.add( 
   	   [ 
   	 	createLabel({	
   			text:'another VERY VERY VERY VERY VERY VERY VERY long name',
   			font:{fontSize:14,fontWeight:'bold'},
   			width:'auto',
   			textAlign:'left',
   			top:4,
   			left:5,
   			height:16,
   			
   	   })
   	
   	,
   	 
   	 	createLabel({
   			color:'gray',
   			text:'sub label',
   			font:{fontSize:12,fontWeight:'bold'},
   			width:'auto',
   			textAlign:'left',
   			bottom:4,
   			left:5,
   			height:14,
   			
   	   })
   	   ,
   	   
   	   createLabel({
           text:'label',
           font:{fontSize:12,fontWeight:'bold'},
           width:'60',
           textAlign:'right',
           bottom:4,
           right:4,
           height:14,
          
       })
   	   
   	 
       ]
   
   );
   
   row3.add( 
   	   [ 
   	   
   	 	createLabel({	
   			text:'rather short name',
   			font:{fontSize:14,fontWeight:'bold'},
   			width:'auto',
   			textAlign:'left',
   			top:4,
   			left:5,
   			height:16,
   			
   	   })	
   	,
   	 	createLabel({
   			color:'gray',
   			text:'sub label',
   			font:{fontSize:12,fontWeight:'bold'},
   			width:'auto',
   			textAlign:'left',
   			bottom:4,
   			left:5,
   			height:14,
   			
   	   })
   	   ,  
   	   createLabel({
           text:'label',
           font:{fontSize:12,fontWeight:'bold'},
           width:'60',
           textAlign:'right',
           bottom:4,
           right:4,
           height:14,
          
       })
   	   
   	 
       ]
   
   );
   
   
   table.data = [row1,row2,row3];
   win.add(table);
   
   win.open();

Vincent 2013-09-09

same problem with a listView
Blain Hamon 2013-09-10

Problem happens independent of table view. Workaround is to use a minimum height of 18.
Blain Hamon 2013-09-10

It should be noted that 16 pixels is way too small for a 14-point font; the 'point' in a font does not include the decenders (e.g., the portions of g,j,p,q, and y below the baseline)

Blain Hamon 2013-09-10

Smaller test case:

   var win = Ti.UI.createWindow({fullscreen:true});  
   var createLabel = Ti.UI.createLabel;
   
   win.add([ 
           createLabel({   
               text:'a VERY VERY VERY VERY VERY VERY VERY long name',
               font:{fontSize:14,fontWeight:'bold'},
               width:'auto',
               textAlign:'left',
               top:4,
               left:5,
               height:17,
                 backgroundColor:'red'
          }),
           createLabel({   
               text:'another VERY VERY VERY VERY VERY VERY VERY long name',
               font:{fontSize:14,fontWeight:'bold'},
               width:'auto',
               textAlign:'left',
               top:40,
               left:5,
               height:16,
               backgroundColor:'blue'              
          })]
   );
   win.open();

Lee Morris 2017-03-20

Closing ticket as duplicate.

JSON Source