Appcelerator change Content height on a ScrollView

Question

I have a scroll view in my alloy project and I need to add a few views when a button is pressed, but the content height, the scrollable area, is not changing, the bottom content goes away from the view. This is my Alloy View (.xml) file

<Alloy>
  <Window class="container">
    <ScrollView id="MainView" >
      <View id="innerContent" class="rowLayout">
        <Label>Address 1</Label>
        <TextField id="Address1" class="textArea"></TextField> 
      </View>
    </ScrollView>
    <View id="buttonView">
      <Button id="button" onClick="doClick" title="Add New Address Input" top="10" width="100" height="50" />
    </View>
  </Window>
</Alloy>

My styling file (.tss), with all the styles:

    ".container": {
        backgroundColor:"white",
        height: Titanium.UI.FILL
    }
    "#MainView": { 
        width: Titanium.UI.FILL,
        height: Titanium.UI.FILL,
        scrollType: "vertical",
        layout: "vertical",
        bottom: "100dp",
        top: "20dp",
        borderColor: "#008000",
        borderWidth: "1px",
        left:"2dp",
        right: "2dp"

    }

    "#buttonView" : {
        height: "50dp",
        width: Titanium.UI.FILL,
        right: "10dp",
        left: "10dp",
        bottom: '8dp',
        borderColor: "#000000",
        borderWidth: "1px"
    }
    ".rowLayout": {
        layout: "vertical"
    }
    ".textArea" : {
        height: "70dp",
        width: Titanium.UI.FILL,
        borderColor: "#000000",
        borderWidth: "1dp",
        left: "8dp",
        right: "8dp"
    }

And my Controller (.js)

var counter=0;
function doClick() { 
  counter++;

  var label = Ti.UI.createLabel({
    text: "Address " + counter + " :"
  });
  var textField = Ti.UI.createTextField({
    height: "70dp",
    width: Titanium.UI.FILL,
    borderColor: "#000000",
    borderWidth: "1dp",
    top: "5dp",
    right: "8dp",
    left: "8dp"
  });

  $.innerContent.add(label);
  $.innerContent.add(textField);
}

$.index.open();

The scroll views does not scroll, or if I already set 3 or four inputs it scroll only to the point where the fourth input was

Answer 1

First thing to do is to move your styling from .xml to .tss to increase overview

Try to set your ScrollView height to Ti.UI.SIZE then set layout to vertical and after that on your click function you add the new view at top: '5%', bottom: '5%'

but remember... you have an button outside your ScrollView, it will goes off screen when your ScrollView increase height