Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Contributor
Posts: 22
Registered: ‎01-05-2013
My Device: Dev Alpha
My Carrier: Bell
Accepted Solution

ListItem Component - have a labels be a minimum of one line long

tl;dr: I need to know how to make a labels minimum width one full line.

 

I'm creating a listview component, that uses 4 labels in total, plus an imageview to the left. One label is a (potentially) multi-line description of the item. And the label below it is a date. The other two labels don't matter for my problem, but they are essentially titles.

 

The description label can range from a few words, to a few lines, and uses left horizontal alignment. The date, I want to horizontally align to the right of the cell; however in cases where the description is only a couple of words long, the date will only horizontally align to the right as far as the description will reach. So if the couple of words in the description only span half way across the cell, then the date will right align to the center of the cell.

 

This causes any cells that dont have at leaast one full line for the description to to have offset dates.

 

I've played around with my containers, but have yet to figure out the sweet spot to get it to work that way, so my second solution, is to have the description label use a minimum width property somehow to have it span at least one line, but I'm not sure how to do that if possible.

 

Any help is appreciated.

Developer
Posts: 1,746
Registered: ‎04-08-2010
My Device: Passport Silver, PRIV
My Carrier: Telekom.de, O2, Vodafone

Re: ListItem Component - have a labels be a minimum of one line long

this is easy to solve

// The ROW CONTENT LEFT-TO-RIGHT Item content: image, some text, image.
        Container {
            id: rowContentContainer
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }
            leftPadding: 6
            rightPadding: 12
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Center
            // LEFT IMAGE 114
            ImageView {
                id: itemImage
                preferredWidth: 114
                preferredHeight: 114
                minWidth: 114
                maxWidth: 114
                imageSource: ListItemData.displayIcon
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 1
                }
                verticalAlignment: VerticalAlignment.Center
            }
            // TEXT TOP-TO-BOTTOM
            Container {
                id: rowTextContainer
                layout: StackLayout {
                    orientation: LayoutOrientation.TopToBottom
                }
                layoutProperties: StackLayoutProperties {
                    spaceQuota: 4
                }
                verticalAlignment: VerticalAlignment.Center
                leftMargin: 30
                // TITLE
                Label {
                    id: titleLabel
                    text: ListItemData.displayTitle
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                        color: Color.Black
                    }
                }
                // SUBTITLE
                Label {
                    id: subtitleLabel
                    text: ListItemData.displaySubtitle
                    textStyle {
                        base: SystemDefaults.TextStyles.SubtitleText
                        color: Color.Black
                    }
                }
            } // end rowTextContainer

 

spacequota is your friend.

BTW: I'm changing spacequota for landscape

-------------------------------------------------------------------------------
ekke (independent software architect, rosenheim, germany)

BlackBerry Elite Developer
BlackBerry Platinum Enterprise Partner
International Development native Mobile Business Apps
BlackBerry 10 | Qt Mobile (Android, iOS)
Workshops / Trainings / Bootcamps

blog: http://ekkes-corner.org
mobile-development: http://appbus.org Twitter: @ekkescorner