Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Button below long tableView

Hi all. I can't seem to figure out what I'm doing wrong here. I want to add a button at the bottom of a tableView. The table view is a form and the big button at the bottom is going to submit it. But when I add the button it is fixed on the screen and doesnt scroll when table view scrolls. Any ideas why?

Do I have to use a scrollableView or something to make this work? What is the proper way to add something below a tableview

Thanks

Dave

— asked September 20th 2010 by Dave F
  • button
  • tableview
0 Comments

3 Answers

  • Accepted Answer

    Try adding saveBtn to a view and then setting that view as the footerView.

    Specify the width of the view to be the same as the width of the table (or the device) and use height:'auto'.

    This should cause the button to be centred within the view.

    — answered September 23rd 2010 by James K
    permalink
    1 Comment
    • How to set same width on footerView like is on tableView? (iPhone and also iPad?)

      — commented March 14th 2013 by Sko
  • There are a few ways you can do this:

    1. Add the button to a view and assign it to the table's footerView.

    2. Append to the table a row containing your button.

    3. Add both the table and your button to a container view set with layout:'vertical'.

    — answered September 20th 2010 by James K
    permalink
    1 Comment
    • Hey. Thanks SOOO much for these tips. Very cool options. I tried playing around with #3 but didnt have any luck. I was able to get #1 to work, but my button and button background image are not lining up properly. My button image is 278x45. but when I define that its shifted right off screen. Also trying to figure out a way to add padding below the button b/c its kind of cut off by the tab bar. Below is the code i'm using

      var b3 = Titanium.UI.createButton({
          color:'#fff',
          backgroundImage:'images/blk_button.png',
          backgroundSelectedImage:'images/blk_button_on.png',
          backgroundDisabledImage: 'images/blk_button_on.png',
          width:278,
          height:57,
          textAlign:'left',
          font:{fontSize:20,fontWeight:'bold',fontFamily:'Helvetica Neue'},
          title:'Search'
      });
      
      var searchTable = Ti.UI.createTableView({
          data:sdata,
          style: Titanium.UI.iPhone.TableViewStyle.GROUPED,
          footerView:b3
      });
      

      — commented September 21st 2010 by Dave F
  • Still can't figure out why this button is off center. Its kind of driving me crazy.

    I set up something similar on a different tab but used a default button instead of a button with a background image and have the same issue. This is what my code looks like. The save button is well right of being center and runs off screen. Any ideas how to resolve this. Has anyone seen this issue? Thanks in advance!

    Fish

    var win = Titanium.UI.currentWindow;
    
    var MemberData = [
    { label:'Username', field:'username', header:'Account Info' },
    { label:'Password', field:'password' }
    ];
    
    var memdata=[];
    var uf = [];
    
    for (var i = 0; i < MemberData.length; i++) {
        var row = Titanium.UI.createTableViewRow();
        row.selectionStyle='none';
    
        var label = Titanium.UI.createLabel({
        text:MemberData[i].label,
        font:{fontSize:16,fontWeight:'bold'},
        width:'auto',
        textAlign:'left',
        left:8,
        height:16,
        selectionStyle:'none'
        });
    
        var def_user = Titanium.App.Properties.getString("username");
        var def_pass = Titanium.App.Properties.getString("password");
    
        uf[i] = Titanium.UI.createTextField({
            height:29,
            width:200,
            right:4,
            selectionStyle:'none',
            autocorrect:false,    
            clearButtonMode:Titanium.UI.INPUT_BUTTONMODE_ONFOCUS,
            borderStyle:Titanium.UI.INPUT_BORDERSTYLE_NONE,
            keyboardType: Titanium.UI.KEYBOARD_DEFAULT,
            returnKeyType: Titanium.UI.RETURNKEY_NEXT,
            autocapitalization: Titanium.UI.TEXT_AUTOCAPITALIZATION_NONE,
            enableReturnKey: true
            }); 
    
    
        if(MemberData[i].field == 'username') {
            uf[i].value = def_user;
        }
    
        if(MemberData[i].field == 'password') {
            uf[i].passwordMask = true;
            uf[i].value = def_pass;
        }
    
        row.add(label);
        row.add(uf[i]);
        row.className = 'meminfo'+i;
        memdata.push(row);
    };
    
    var saveBtn = Titanium.UI.createButton({
        title:'Save',
        height:40,
        width:200
    });
    
    saveBtn.addEventListener('click', function()
    {
        uf[0].blur();
        uf[1].blur();
        Ti.App.Properties.setString("username",uf[0].value);
        Ti.App.Properties.setString("password",uf[1].value);
        var a = Titanium.UI.createAlertDialog({
            title:'Settings Saved',
            message:''
        });
        a.show();
    
    });
    
    var tableView = Ti.UI.createTableView({
        data:memdata,
        style: Titanium.UI.iPhone.TableViewStyle.GROUPED, 
        footerView:saveBtn
    });
    
    Titanium.App.fireEvent('hide_indicator');
    
    win.add(tableView);
    
    — answered September 23rd 2010 by Dave F
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.