[TIMOB-24584] horizontalWrap is not working in ScrollView
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Medium |
Status | Closed |
Resolution | Invalid |
Resolution Date | 2017-10-06T21:43:47.000+0000 |
Affected Version/s | n/a |
Fix Version/s | n/a |
Components | n/a |
Labels | n/a |
Reporter | ILAY SENER |
Assignee | Eric Merriman |
Created | 2017-03-31T05:37:29.000+0000 |
Updated | 2017-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
File | Date | Size |
---|---|---|
Screen Shot 2017-03-31 at 16.37.06.png | 2017-03-31T05:37:26.000+0000 | 193618 |
Looks like an issue with the SDK, move to TIMOB.
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.