[TIMOB-1013] table view row with text field and left > 35 = shift in table view on text field focus

Description

var win = Titanium.UI.createWindow();
 
function addRow()
{
    var row = Ti.UI.createTableViewRow({height:50});
    var tf1 = Titanium.UI.createTextField({
        hintText:'Enter todo here',
        color:'#336699',
        height:45,
        left:40,
        width:280,
        borderStyle:Titanium.UI.INPUT_BORDERSTYLE_NONE
    }); 
    row.add(tf1);
    row.selectionStyle = Ti.UI.iPhone.TableViewCellSelectionStyle.NONE;
    row.className = 'control';
    return row;
}


// create table view data object
var data = [];

data[0] = addRow();

var tableView = Ti.UI.createTableView({
    data:data,  
    style: Titanium.UI.iPhone.TableViewStyle.GROUPED
});
win.add(tableView); 

win.open();

Comments

1. Damien Elmes 2011-04-15

   Yep, I've hit this too when embedding a text field on the right:

      var isAndroid = Ti.Platform.name == 'android';
      
      var decksWin = Ti.UI.createWindow({title:'Decks',
                                          backgroundColor: '#000',
                                          barColor: "#000"});
      var decksTab = Ti.UI.createTab({title: "Decks", window: decksWin});
      var tabGroup = Titanium.UI.createTabGroup();
      tabGroup.addTab(decksTab);
      tabGroup.open();
      
      decksWin.orientationModes = [
          Titanium.UI.PORTRAIT,
          Titanium.UI.LANDSCAPE_LEFT,
          Titanium.UI.LANDSCAPE_RIGHT
      ];
      
      var tv = Ti.UI.createTableView(
          {top: 0, left: 0, right: 0, bottom: 0,
           style: Titanium.UI.iPhone.TableViewStyle.GROUPED});
      var tdata = [];
      
      var row = Ti.UI.createTableViewRow();
      var t1 = Ti.UI.createTextField(
          {right: 10,
           width: 100,
           autocapitalization:Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
           returnKeyType:Titanium.UI.RETURNKEY_NEXT,
           value: "",
           hintText: "Required"
          });
      row.add(t1);
      
      // not sure why this is necessary
      row.addEventListener("click", function () {
                               t1.focus();
                           });
      
      var l1 = Ti.UI.createLabel({text:"Username",
                                  width: 100,
                                  left:10,
                                  font:{fontWeight:"bold", fontSize:16}});
      row.add(l1);
      tdata.push(row);
      
      tv.data = tdata;
      decksWin.add(tv);
      

2. Damien Elmes 2011-04-15

   (if in landscape mode when you start editing, the table never returns until the user manually scrolls it back)

3. Blain Hamon 2011-04-15

   Okay, what's going on here in the first case is that the text field specified to have a width of 280, but it has a a left of 40, inside the tableRow (which has a margin of 10 inherent because it's a grouped style. So its frame in the window goes from x=40 to x=330. So in this case it's end developer error, as the scrolling to fit the text field in view is intentional; to solve this, have the width not be specified, and it'll be the remaining 260 pixels (there's a 10 pixel margin on the other side as well) automatically.

   I'm looking into the landscape issue now.

4. Jeff Haynie 2011-04-15

   (from [2f54f0ea7501b0b762f3742a2b6ee05767949932]) Closes #1013 by making ModifyScrollViewForKeyboardHeightAndContentHeightWithResponderRect compensate for being in landscape mode. http://github.com/appcelerator/titanium_mobile/commit/2f54f0ea7501b0b762f3742a2b6ee05767949932"> http://github.com/appcelerator/titanium_mobile/commit/2f54f0ea7501b...

JSON Source