Titanium Community Questions & Answer Archive

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

createScrollView with layout:'vertical' still scrolls horizontally

Hi, I am trying to use the following code to create a rounded box with a textField in it. When the text field is focused, I'd like the window to scroll up so the input field is visible - but not to scroll horizontally to center the input. I thought I could do that with the line layout:'vertical' but the window still seems to scroll horizontally. Can anyone help?

This is my code:

    var setup = Titanium.UI.createWindow({  
        title:'Setup Striptag',  
        color:'#fff',
        barColor:'#000',
        fullscreen: true,
        backgroundColor:'#444'
    });

    var scrollView = Titanium.UI.createScrollView({  
        contentWidth:'auto',  
        contentHeight:'auto',  
        top:0,
        layout: 'vertical',
        showVerticalScrollIndicator:true,  
    });  
    setup.add(scrollView);

    // Add holder for search results
    var roundedBox = Ti.UI.createView({ 
        backgroundColor: '#fff', 
        borderRadius: 12, 
        height: 90, 
        width: 300, 
        top: 260 
    });
    scrollView.add(roundedBox);
— asked March 12th 2011 by Walker Williams
  • layout
  • scrollable
  • scrollableview
  • scrollview
0 Comments

5 Answers

  • Just set contentWidth to 100% and it'll disable horizontal scrolling

    — answered November 12th 2012 by Marco Cancellieri
    permalink
    0 Comments
  • Walker

    Please state the 3rd-party mobile and Titanium SDK versions you are using, as you should whenever you post a question. The question tags are the best place for this information. See the Participating in the Q&A guide for tips on getting more accurate answers more quickly in these forums.

    Regarding your question, the layout property is intended to be used to change the way objects are positioned within a view from absolute to relative. Thus, it will not help with your objective.

    Be aware that Titanium.UI.ScrollView will only scroll horizontally and vertically when its contents exceed its dimensions. Thus, to prevent it scrolling horizontally, simply ensure that roundedBox is smaller widthwise than the width of scrollView.

    In addition, you can use the scrollType:vertical property (android only), and/or disable the horizontal scroll indicator using, showHorizontalScrollIndicator:false.

    Hope this helps

    — answered March 13th 2011 by Paul Dowsett
    permalink
    1 Comment
    • Use quotes
      scrollType : 'vertical'

      — commented February 16th 2014 by Giannis Christofakis
  • its in the documentation.

    If the scrollType property is not defined, the scroll view attempts to deduce the scroll direction based on some of the other properties that have been set. Specifically, if contentWidth and width are both set and are equal to each other, or if they are both set and showVerticalScrollIndicator is set to true, then the scroll direction is set to "vertical". If contentHeight and height are both set and are equal, or if they are both set and showHorizontalScrollIndicator is set to true, then the scroll direction is set to "horizontal". If scrollType is set, it overrides the deduced setting.

    — answered January 31st 2013 by Keith Levi Lumanog
    permalink
    0 Comments
  • Thanks a lot (contentWidth : '100%',) it works for me took ::))

    — answered June 12th 2013 by amine kotni
    permalink
    0 Comments
  • I had a similar scenario. To fix it I used both width: Titanium.UI.SIZE and contentWidth: '100%'.

    — answered April 29th 2015 by Collin Price
    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.