Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-24584] horizontalWrap is not working in ScrollView

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionInvalid
Resolution Date2017-10-06T21:43:47.000+0000
Affected Version/sn/a
Fix Version/sn/a
Componentsn/a
Labelsn/a
ReporterILAY SENER
AssigneeEric Merriman
Created2017-03-31T05:37:29.000+0000
Updated2017-10-06T21:43:47.000+0000

Description

Setting horizontalWrap to true,'horizontalWrap="true"' , doesn't seem to work when used in a ScrollView. Same setup works fine in a standard View. However, need to use ScrollView to make the page scroll vertically. Please see the code examples. Change to to see the differences.
<Alloy>
	<Window theme="axwayRedMenu" title="News" >
		<ActionBar id="actionbar"   platform="android" onHomeIconItemSelected="Alloy.Globals.manageMenuSelection"   />
		<Require src="helper/menuBar" />
		
			<ScrollView class="container greyLight" height="100%" width="100%" horizontalWrap="true" layout="horizontal" scrollingEnabled="true" scrollType="vertical" >
			
				<View class="boxHolder">
					<View class="box paddingRight">
						<Label text="AXWAY" class="h1" />
						<Label text="IN THE NEWS" class='h2' />
						<Label text="CEOs need to transform their approach to customer experience by 2020" class="summary" />
						<Label text="Read More" onClick="openBrowser" class="link" url="https://www.axway.com/en/about-axway/newsroom#tablist1-tab1" />
					</View>
				</View>
				<View class="boxHolder">
					<View class="box paddingLeft">
						<Label text="AXWAY" class="h1" />
						<Label text="PRESS RELEASE" class='h2' />
						<Label text="Axway Propels Mortgage Banking Industry into Digital Age at MBA’s National Technology in Mortgage Banking Conference & Expo 2017" class="summary" />
						<Label text="Read More" onClick="openBrowser" class="link" url="https://www.axway.com/en/pressrelease/2017/axway-propels-mortgage-banking-industry-digital-age-mbas-national-technology" />

					</View>
				</View>
				<View class="boxHolder">
					<View class="box paddingRight">
						<Label text="AXWAY" class="h1" />
						<Label text="REPORT" class='h2' />
						<Label text="Axway Receives Representative Vendor Recognition in Gartner Market Guide Report" class="summary" />
						<Label text="Read More" onClick="openBrowser" class="link" url="https://www.axway.com/en/report/axway-receives-representative-vendor-recognition-gartner-market-guide-report" />
					</View>
				</View>
				<View class="boxHolder">
					<View class="box paddingLeft"></View>
				</View>
				<View class="boxHolder">
					<View class="box paddingRight">
						<Label text="AXWAY" class="h1" />
						<Label text="REPORT" class='h2' />
						<Label text="Axway Receives Representative Vendor Recognition in Gartner Market Guide Report" class="summary" />
						<Label text="Read More" onClick="openBrowser" class="link" url="https://www.axway.com/en/report/axway-receives-representative-vendor-recognition-gartner-market-guide-report" />
					</View>
				</View>
				<View class="boxHolder">
					<View class="box paddingLeft"></View>
				</View>
				<View class="boxHolder">
					<View class="box paddingRight">
						<Label text="AXWAY" class="h1" />
						<Label text="REPORT" class='h2' />
						<Label text="Axway Receives Representative Vendor Recognition in Gartner Market Guide Report" class="summary" />
						<Label text="Read More" onClick="openBrowser" class="link" url="https://www.axway.com/en/report/axway-receives-representative-vendor-recognition-gartner-market-guide-report" />
					</View>
				</View>
				<View class="boxHolder">
					<View class="box paddingLeft"></View>
				</View>
			</ScrollView>
	</Window>
</Alloy>
function createContent() {
    var wrapper = Ti.UI.createView({
        width: 50,
        height: 50,
        backgroundColor: 'pink',
    });
    return wrapper;
}

var win = Ti.UI.createWindow({
    navBarHidden: true
});

var scrollView = Ti.UI.createScrollView({
    height: '100%',
    width: '100%',
    layout: 'horizontal',
    horizontalWrap: true,
    scrollingEnabled: true,
    scrollType: 'vertical'
});

win.add(scrollView);

for (var i = 0; i < 10; ++i) {
    scrollView.add(createContent());
}

win.open();

Attachments

FileDateSize
Screen Shot 2017-03-31 at 16.37.06.png2017-03-31T05:37:26.000+0000193618

Comments

  1. Feon Sua Xin Miao 2017-04-17

    Looks like an issue with the SDK, move to TIMOB.
  2. Joshua Quick 2017-10-06

    Not a bug. You also need to set ScrollView property "contentWidth" to "Ti.UI.FILL", which sets the max horizontal size of the scrollable content area to the width of the ScrollView container. The default for "contentWidth" is AUTO, which causes the width of the content area to grow infinitely as you add views to the horizontal layout, and it'll never wrap because of this.

JSON Source