Titanium JIRA Archive
Appcelerator Community (AC)

[AC-1467] ScrollView with horizontal layout disappears

GitHub Issuen/a
TypeBug
Priorityn/a
StatusClosed
ResolutionCannot Reproduce
Resolution Date2014-09-01T05:46:29.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsAlloy
Labelshorizontal, layout, scrollview
ReporterDavid Smith
AssigneeMauro Parra-Miranda
Created2014-07-15T14:51:06.000+0000
Updated2016-03-08T07:37:54.000+0000

Description

The entire ScrollView will disappear if: a) The ScrollView is added as the second view to a window with horizontal layout and b) Enough views are added to the ScrollView so that they are not all visible at the same time within the ScrollView. Here is my Alloy code- index.xml: 
<Alloy>
    <Window class="container" layout="horizontal" width="Ti.UI.FILL" height="Ti.UI.FILL">
        <View id="leftView" width="200dp" height="Ti.UI.FILL" />
        <ScrollView id="scrollView" layout="horizontal" width="Ti.UI.FILL" height="Ti.UI.FILL" />
    </Window>
</Alloy>
index.tss: 
".container": {
    backgroundColor:"white"
},
 
"#scrollView": {
    borderColor: 'green',
    borderWidth: '2dp',
    backgroundColor: 'red',
    contentWidth: "auto",
    contentHeight: "auto",
    horizontalWrap: false,
    scrollsToTop: false,
    showHorizontalScrollIndicator: true,
    showVerticalScrollIndicator: false,
    horizontalBounce: true,
    verticalBounce: false
}
index.js: 
var numViews = 10;
 
var views = [];
 
var params = [
    { color: "#333", text: "Label 1" },
    { color: "#444", text: "Label 2" },
    { color: "#555", text: "Label 3" },
    { color: "#666", text: "Label 4" },
    { color: "#777", text: "Label 5" },
    { color: "#888", text: "Label 6" },
    { color: "#999", text: "Label 7" },
    { color: "#aaa", text: "Label 8" },
    { color: "#bbb", text: "Label 9" },
    { color: "#ccc", text: "Label 10" },
];
 
function createViews() {
    function createView(args) {
        var view = Ti.UI.createView({
            width: "240dp",
            height: Ti.UI.FILL,
            backgroundColor: args.color
        });
        var label = Ti.UI.createLabel({
            text: args.text
        });
        view.add(label);
        return view;
    }
 
    for (i = 0; i < numViews; i++) {
        var view = createView(params[i]);
        views.push(view);
        $.scrollView.add(view);
    }
}
 
createViews();
 
$.index.open();
I'm using Titanium SDK 3.2.3 and Alloy 1.3.1. Try creating a new Alloy project with the above code, and when run in the iPad simulator using landscape mode you'll see just a blank white screen. Changing numViews to 3 will cause the ScrollView to appear. Removing leftView from index.xml will also cause the ScrollView to appear. Here's the link to the Community Q&A: http://developer.appcelerator.com/question/175562/bug-with-scrollview

Comments

  1. Shuo Liang 2014-07-24

    HI, You should add this line 
       horizontalWrap: false,
    into 
       ".container": { 
   	backgroundColor:"white",
   },
    Hope this will helps you. Regards, Shuo
  2. Mauro Parra-Miranda 2014-08-03

    Hello [~mrahman]! Can you please take a look and try the resolution? To see if that still works with 3.3.0.GA. TIA!
  3. Harish Mridha 2014-08-03

    Hi, We tried to reproduce this issue using the sample test case. It’s working as expected with Titanium SDK 3.3.0.GA.

    TESTING ENVIRONMENT:

    Titanium SDK: 3.2.3.GA and 3.3.0.GA Titanium CLI: 3.3.0 OS X Version: 10.9.3 iOS 7.1.2

    STEPS TO TEST:

    - Create a simple project. - Update project using given test code - Add horizontalWrap: false to container - Run on iOS simulator

    EXPECTED RESULT:

    It’s working as expected. Thanks
  4. Mauro Parra-Miranda 2014-09-01

    Please apply the suggested code modification.

JSON Source