getting different result in emulator and device in titanium alloy app

Question

I am developing mobile app in titanium alloy for placing order. In my app I have to show the previous order history one text box for writing order and one button to send it. For that i did the fallowing code XML file

<Alloy>
  <Window class="container" id="win">
        <View id="TextOrders">
           <ScrollView id="scrollView" showVerticalScrollIndicator="true" showHorizontalScrollIndicator="true">

           </ScrollView>
           <TextArea id="txtTextOrder"></TextArea>
            <Button id="btnSend" onClick="SendTextOrder">Send</Button>
      </View>
    </Window>
</Alloy>

js file

var args = arguments[0] || {};
var win = Ti.UI.createWindow({
  backgroundColor:'white'
});

var TextOrders = Ti.UI.createView({
  backgroundColor:'white'
});
function createRow(Request_Id,Order,Date) {
  var row = Ti.UI.createView({
    backgroundColor: 'white',
    borderColor: '#F5FFC6',
    borderWidth: 1,
    width:'80%', 
    top: 10, 
    left: 5,
    layout: 'vertical',
    height:Ti.UI.SIZE,
    shadow:{color:'#F5FFC6', offset:{width:3,height:3}},
    backgroundColor:'#F5FFC6',
    borderRadius:'5',
    viewShadowColor:'black',
    viewShadowOffset:{ width:5,height:5},
    viewShadowRadius:'5',
    opacity:'0.6'
  });
 var lblRequest_Id = Ti.UI.createLabel({
    text: "OrderId : "+Request_Id,
    top: 10, 
    left: '5',
    width: '80%', 
    color:'#000',
  });
  var lblOrder = Ti.UI.createLabel({
    text: Order,
    top: 10, 
    left: '5',
    width: '80%', 
    color:'#000',

  });
   var lblDate = Ti.UI.createLabel({
    text: Date,
    top: 10, 
    left: '5',
    width: '80%', 
    color:'#000',
  });
  row.add(lblRequest_Id);
  row.add(lblOrder);
  row.add(lblDate);
  return row;
}
var scrollView = Ti.UI.createScrollView({
  bottom:220,
  contentHeight: 'auto',
  layout: 'vertical',
   top:'0px',
   height:(Ti.Platform.displayCaps.platformHeight-220),
   zIndex:10,
   backgroundColor:'#F0F0F0',
});

var db = Ti.Database.open('Database\AppDb');    
try{
    var OrderDetails = db.execute('SELECT * FROM Text_Orders'); 
    while (OrderDetails.isValidRow())
    {
        var row = createRow(OrderDetails.fieldByName('Request_Id'),OrderDetails.fieldByName('Order'),OrderDetails.fieldByName('Date'));
        scrollView.add(row);
        scrollView.scrollToBottom();
        OrderDetails.next();
    }
}
catch(e){
}
finally{
    db.close(); 
}

scrollView.scrollToBottom();
$.TextOrders.add(scrollView);
win.add(TextOrders);

$.win.open();

in tss file

".container" : {
  backgroundColor:"white",
  backgroundImage:"/assets/Images/BackgroundImg.jpg",
}
"#TextOrders":{
    width:'100%',
    height:'100%',
    top:'0px',
}
"#scrollView":{
    borderColor:'blue',
    borderWidth:'1px',
    top:'0px',
    height:'100%',
    bottom:'120dp',
}

"#txtTextOrder":{
    width:'99%',
    height:"100dp",
    left:3,
    borderWidth:'1px',
    borderColor: '#bbb',
    backgroundColor:'#FFF',
    borderRadius: 5,
    color: '#888',
    bottom:'50dp',
    hintText:'Write your order',
    zIndex:11,
}
"#btnSend":{
    width: Ti.UI.SIZE,
    height: Ti.UI.SIZE,
    color: "#000",
    width:'99%',
    left:3,
    bottom:'0dp',
     zIndex:11,
}

I am getting result in emulator as

enter image description here

but when I install it on mobile I got the result as enter image description here

I wand order view should be start from the top and end above the textbox as in emulator. I do not understanding why it showing different result.

Mitul Bhalia Mitul Bhalia · Accepted Answer · 2014-08-28T10:14:43

because you are setting height and bottom both properties for scrollview so just remove height property of scrollview and try...

"#scrollView":{
    borderColor:'blue',
    borderWidth:'1px',
    top:'0px',
    bottom:'120dp',
}

getting different result in emulator and device in titanium alloy app

1 Answers