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
Trusted Contributor
Brennan12325
Posts: 204
Registered: ‎05-15-2012
My Device: None
Accepted Solution

Is this layout impossible?

impossibleDesign.png

 

I'm trying to build this layout. Notable things. The bottom right and left box are both aligned to the bottom left and bottom right of the orange container. The orange container varies in length based on the amount of text in the multi-line label.

 

PROBLEMS:

1) Making the orange container a DockLayout, docking the multi-line label to the top, and the other two labels to the bottom/left and bottom/right causes the bottom labels to print overtop of the top layout. This is because the minimum height of the orange box is exceeded (in some cases), and DockLayout has no property to expand, to avoid overlapping.

dockLayoutFail.png

 

2) Making the container a StackLayout, this works better, since the top label is forced to not overlap the bottom two labels. However, if the multi-line label doesn't fill the entire minimum height of the orange box (which occurs in some cases), despite the bottom/left and bottom/right box being vertically aligned to the bottom, they are rendered just below the multi-line label. StackLayout seems to ignore the vertical alignment of the bottom two boxes, for whatever reason.

stackLayoutFail.png

 

Any idea as to how this design can be implemented?

----------------------
Check out my app, Alien Flow for reddit

And of course, like my post if you found it helpful or informative!
Please use plain text.
Developer
bobdodd
Posts: 116
Registered: ‎10-31-2012
My Device: BB10 Dev Alpha B

Re: Is this layout impossible?

Not proper QML but maybe something like this?

 

Container with stack layout {

    Container with stack layout {

        Label

    }

   Container with dock layout {

       Box 1

       Box 2

    }

}

Please use plain text.
Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Is this layout impossible?

There are several approaches I could think of, but this one seems to work fine.

Container {
    layout: DockLayout {}
    property int padding: 20
    background: Color.create("#ff7f27")
    horizontalAlignment: HorizontalAlignment.Fill
    leftPadding: padding
    rightPadding: padding
    topPadding: padding
    bottomPadding: padding
    minHeight: 300   // key parameter

    Container {
        bottomPadding: bottomArea.height // note link to bottom area
        Label {
            id: theLabel
            multiline: true
            text: "Bacon ipsum dolor sit..."
        }
    }

    Container {
        id: bottomArea
        property int height: 100  // key parameter to keep label from intruding
        layout: DockLayout {}
        verticalAlignment: VerticalAlignment.Bottom
        horizontalAlignment: HorizontalAlignment.Fill

        Container {
            background: Color.Black
            preferredWidth: 200
            preferredHeight: parent.height - 25
        }

        Container {
            horizontalAlignment: HorizontalAlignment.Right
            background: Color.Black
            preferredWidth: 200
            preferredHeight: parent.height - 25
        }
    }
}

 

Note several comments identifying key parameters. You didn't give enough detail about what the bottom boxes were for me to do more than this, so they're just fixed-height containers for now.

 

layout_challenge1_a.pnglayout_challenge1_b.png layout_challenge1_c.png


Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Please use plain text.
Developer
bobdodd
Posts: 116
Registered: ‎10-31-2012
My Device: BB10 Dev Alpha B

Re: Is this layout impossible?

[ Edited ]


The simplest example I could do (using labels) was this. Just replace the Labes with whatever elements you want. It's pretty much like Peter's but I've used a stack layout for the outer container, so I don't need to worry about container heights.

 

Page {
    Container {
        layout: StackLayout {}        
        Label {
            text: "line 1 of 2\nline2 of 2"
            multiline: true
        }
        Container {
            layout: DockLayout {}
            horizontalAlignment: HorizontalAlignment.Fill
            
            Label {
                text: "Left"
            }
            
            Label {
                text: "Right"
                horizontalAlignment: HorizontalAlignment.Right
            }
        }
    }
}

 

Please use plain text.
Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Is this layout impossible?

bobdodd, will that meet all the requirements? It looks to me like it would always keep the bottom two labels nestled right up immediately following the multiline label. He wants something that will respect a minimum height and in case the label is too short, looks like my left-most screenshot (where there's extra space between the two to pad the container out to the minimum height).

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Please use plain text.
Developer
bobdodd
Posts: 116
Registered: ‎10-31-2012
My Device: BB10 Dev Alpha B

Re: Is this layout impossible?

Hi Peter,  maybe we're reading the requirements slightly differently?

I read " The orange container varies in length based on the amount of text in the multi-line label"  as that the defining size of the orange container is the height of the multi-line text plus the buttons, so a stack layout would do the job.

 

I should probably have added an enclosing container around the whole thing though,  to allow the orange container to be less than page size, and that's the one which would have the orange background, preferred/minimum  sizes etc.

Please use plain text.
Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: Is this layout impossible?

bobdodd, he also mentioned in item 2 a "minimum height" for the orange box, and his third image seems to support my view that he needs more than just the DockLayout-inside-StackLayout.

Of course, if we never hear from him again we'll never know whether I'm right. Brennan12325, if any of these posts solved your problem, be sure to click "Accept as Solution", or at least click "like" on any that helped.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Please use plain text.
Trusted Contributor
Brennan12325
Posts: 204
Registered: ‎05-15-2012
My Device: None

Re: Is this layout impossible?

You understood the problem correctly, and solved it as it was defined. Thank you!

 

Sorry for the slow response. End of the university term :/

 

Basically I just needed to realize that the bottom two labels were of constant height, and set bottom padding on the top box to make sure it could not overlap the bottom labels. Fortunately I had you to realize that for me.

----------------------
Check out my app, Alien Flow for reddit

And of course, like my post if you found it helpful or informative!
Please use plain text.