Quantcast
Channel: Appcelerator Developer Center Q&A Unanswered Questions 20
Viewing all articles
Browse latest Browse all 8068

ScrollView Item Height

$
0
0

Env: Ti v3.4.0, Alloy 1.5.0. Mac OSX Yosemite, iOS Simulator running iOS 8.0

For the life of me, I can't figure out how to make items inside a scrollview automatically adjust their height. I have a scrollview, full of items, and each has a variable amount of content. I'd like each of those views to automatically adjust to accommodate the height, and stack accordingly in the scrollview.

Current state of the code:

nearby.xml

<Alloy>
    <Window title="Nearby">
        <RightNavButton>
            <ImageView image="icon-map.png" id="toggleView" />
        </RightNavButton>
        <TabbedBar id="nearbyFilter">Feed
            <Labels>
                <Label>Everyone</Label>
                <Label>My Places</Label>
            </Labels>
        </TabbedBar>
        <ScrollView id="nearbyFeed"></ScrollView>
        <View id="map" visible="false">
            <Module id="mapView" module="ti.map" method="createView"/>
        </View>
    </Window>
</Alloy>
nearby.tss
"Window":{
    backgroundColor: "#e2e3e1"
}
 
"TabbedBar":{
    height: "30dp",
    width: "207dp",
    tintColor: "#32bade",
    top: "10dp",
    index: 0
}
 
"#nearbyFeed":{
    top: "50dp",
    height: Ti.UI.FILL,
    contentHeight: 'auto',
    layout: 'vertical'
}
 
"#nearbyFilter":{
    zIndex: 99
}
And, the items being added:

nearbyFeedItem.xml

<Alloy>
    <View id="feedItem">
        <View id="masthead">
            <ImageView id="locationImage"/>
            <View id="attribution">
                <View layout="horizontal" id="sourceContainer">
                    <Label class="attr_light" id="source"/>
                </View>
                <ImageView id="sourceImage" />
            </View>
        </View>
        <View id="mileageIndicator">
            <ImageView image="icon-mileagepin.png" id="mileagePin"/>
            <Label id="mileage"></Label>
            <Label id="mileageText">mi</Label>
        </View>
        <View id="placeContent">
            <Label id="placeName"/>
            <Label id="placeCategory"/> 
            <Label id="placeRecommendation"></Label>
        </View>
    </View>
</Alloy>
nearbyFeedItem.tss
"#attribution":{
    width: "127dp",
    height: "36dp",
    backgroundColor: "#fff",
    bottom: 0,
    right: 0
}
 
"#feedItem":{
  height: 'auto',
  top: "9dp",
  width: "96%",
  backgroundColor: "#f9f9f9"
}
 
/*other unimportant stuff*/
As you'll see here (https://www.dropbox.com/s/w8zpqqdt5c4g5xo/Screenshot%202014-09-30%2019.58.54.png?dl=0), this results in the item in the scrollview extending to the bottom of the screen.

I've tried contentHeight: auto on the scrollview, tried height: Ti.UI.SIZE on the feedItem to no avail.

What am I missing?

Thanks!

Justin


Viewing all articles
Browse latest Browse all 8068

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>