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
New Developer
Posts: 78
Registered: ‎04-17-2011
My Device: BlackBerry Z10 LE
My Carrier: Bell
Accepted Solution

Custom List width issue.

listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        Container {
                            leftMargin: 5.0
                            topMargin: 5.0
                            layout: StackLayout {
                                orientation: LayoutOrientation.TopToBottom
                            }
                            horizontalAlignment: HorizontalAlignment.Fill
                            Container {
                                layout: StackLayout {
                                    orientation: LayoutOrientation.LeftToRight
                                }
                                horizontalAlignment: HorizontalAlignment.Fill
                                Label {
                                    text: ListItemData.agencyName

                                    // Apply a text style to create a title-sized font
                                    // with normal weight
                                    multiline: true
                                    horizontalAlignment: HorizontalAlignment.Fill
                                    textStyle {
                                        base: SystemDefaults.TextStyles.TitleText
                                        fontWeight: FontWeight.Normal
                                    }
                                }
                                ImageView {
                                    imageSource: ListItemData.statusIcon
                                    verticalAlignment: VerticalAlignment.Center
                                    horizontalAlignment: HorizontalAlignment.Right
                                    preferredWidth: 32.0
                                }
                            }
                            ProgressIndicator {
                                fromValue: 100
                                toValue: 0
                                value: 50
                                verticalAlignment: VerticalAlignment.Center
                                horizontalAlignment: HorizontalAlignment.Left
                            }
                        }
                    }
                ]

 Here I have a custom list box. With a label on the left, an icon/image on the right and a progress bar under for each item in the list.

 

The problem is, I can't get the icon/image aligned to the right, it just follows after the text.

 

ie.

| This is a test X                |

| ------------------------------- |

 

what I want

| This is a test                X |

| ------------------------------- |

 

Might be my layout, I tried to add horizontal fill everywhere, no change.

MaxxWares.com
Current apps:
-BBOS 10-
MaxxTransit - Coming soon
Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Custom List width issue.

[ Edited ]

You can fill a container with background color to ensure that outer container takes all the available width.

If it doesn't, try setting preferredWidth(Infinity)

 

HorizontalAlignment.Right will not work in LeftToRight layout due to a bug.

There are multiple workarounds:

 

- Use DockLayout instead. This is not very convenient as items can overlap, but for short strings (menus etc) it can work. Here's an example in C++:

http://supportforums.blackberry.com/t5/Cascades-Development/list-item-image-size/m-p/2064721#M9602

 

- Insert an empty container with .spaceQuota(1) between left and right items. Divide left item's right margin and right item's left margin in half (because middle container will not let their margins to overlap).

 

p.s. Fill doesn't seem to work for StackLayout. Use preferredWidth/Height(Infinity) instead.

 


Andrey Fidrya, @zmeyc on twitter
New Developer
Posts: 78
Registered: ‎04-17-2011
My Device: BlackBerry Z10 LE
My Carrier: Bell

Re: Custom List width issue.

fill did work for me prior to trying to add the progress bar on another line.

I'll check this out shortly.
MaxxWares.com
Current apps:
-BBOS 10-
MaxxTransit - Coming soon
New Developer
Posts: 78
Registered: ‎04-17-2011
My Device: BlackBerry Z10 LE
My Carrier: Bell

Re: Custom List width issue.

container with spacequota in between the label and the image worked.

Wish I could get some padding/margin to unstick the image from the right side but nothing works.

 

It's not too bad so I'll probably leave as-is until later. It's not bad enough to waste too much time on atm.

 

Thanks

MaxxWares.com
Current apps:
-BBOS 10-
MaxxTransit - Coming soon
Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Custom List width issue.

I think another invisible container without spaceQuota but with fixed preferredWidth should work for padding. Smiley Happy

Andrey Fidrya, @zmeyc on twitter
New Developer
Posts: 78
Registered: ‎04-17-2011
My Device: BlackBerry Z10 LE
My Carrier: Bell

Re: Custom List width issue.

All this funky stuff reminds me dealing with quirky behavior in web browsers...
MaxxWares.com
Current apps:
-BBOS 10-
MaxxTransit - Coming soon