Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-11707

scrollableView height property set to Ti.UI.SIZE causes view to not display at all

    Details

      Description

      Setting the height property in scrollableView to Ti.UI.SIZE hides the view (probably sets height to 0).

      The expected effect would be to have the scrollableView height adjust to the height of its contents or at least the default height (fit on screen).
      The only way to get the scrollable view to display larger than the screen is to explicitly set its height with an integer value. This is not always possible or desirable since the content height might be unknown and computing it "by hand" with toImage() is costly.
      The code example below has a variety of height values to demonstrate the different scenarios (uncomment as needed):

      var win = Ti.UI.createWindow({
          title:'ScrollableView'
      });
       
      var scrollView = Ti.UI.createScrollView({
          top:0,
          left:0,
          backgroundColor:'#f1f1f1',
          width:Ti.UI.FILL,
          height:Ti.UI.FILL,
          contentWidth:'auto',
          contentHeight:'auto',
          showVerticalScrollIndicator: true,
          showHorizontalScrollIndicator: false,
          layout:'vertical'
      });
       
      var lab = Ti.UI.createLabel({
          color:'#2a2a2a',
          height:44,
          width:Ti.UI.SIZE,
          top:12,
          left:12,
          right:12,
          text:'Not working as expected',
          textAlign:'left',
          font:{fontFamily:'HelveticaNeue',fontSize:16,fontWeight:'normal'}
      });
       
      var views = [];
       
      var v1 = Ti.UI.createView({
          top:0,
          width:'100%',
          height:300,
          backgroundColor:'red'
      });
       
      views.push(v1);
       
      var v2 = Ti.UI.createView({
          top:0,
          width:'100%',
          height:600,
          backgroundColor:'green'
      });
       
      var lab2 = Ti.UI.createLabel({
          top:370,
          left:60,
          right:60,
          text:'Scroll me up to see how I get cut off'
      });
       
      v2.add(lab2);
      views.push(v2);
       
      var scrollableView = Ti.UI.createScrollableView({
          top:0,
          views:views,
          showPagingControl:false,
          // height:'auto'     // This is probably the default because
                               // it has no affect
          // height:Ti.UI.FILL // This is probably the default because
                               // it has no affect
          // height:Ti.UI.SIZE // If you add this the hight sets to 0
          // height:700        // This works and will make the
                               // scrollableView fit its contents, but
                               // requires that the height of the contents
                               // is known, which is not the case in this app
      });
       
      scrollView.add(lab);
      scrollView.add(scrollableView);
      scrollView.add(Ti.UI.createView({top:0,width:Ti.UI.FILL,height:20}));
      win.add(scrollView);
      win.open();
      

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                vduggal Vishal Duggal (Inactive)
                Reporter:
                hglattergotz Henning Glatter-Gotz
              • Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Titanium SDK/CLI <> Titanium Mobile
                    Synced with:
                    TIMOB-14902
                    Sync status:
                    ERROR
                    Last received:
                    Last sent:

                    Git Source Code