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 Contributor
pipould
Posts: 4
Registered: ‎01-01-2013
My Device: BB10
My Carrier: SFR
Accepted Solution

Cascades - Vertical Alignement doesn't work after adding a top container

Hello all,

 

I'm facing a problem with vertical alignement... Trying to play and imagine a way to port my apps to BB10, I wanted to create a setting page and center my components in the center of the screen. I created the necessary containers and stuff, it worked, but then, my background, was obviously only in the center of the screen too.

 

So I decided to add a top level container that would only hold the background. But then, my content is not centered anymore (in the child container). I do not get why and I'm sure i'm missing something.

 

Here is the structure:

 

Page {
    content:Container {
     
        layout: StackLayout {
        }
        background: Color.create("#555555")
        Container {
            layout: StackLayout {
            }
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Center // DOES NOT WORK
            
            Container {
                horizontalAlignment: HorizontalAlignment.Fill
                layout: DockLayout {
                }
                Label {
                    text: "Save location"
                    horizontalAlignment: HorizontalAlignment.Left
                    verticalAlignment: VerticalAlignment.Center
                    textStyle {
                        base: tsd1.style
                    }
                }
                ToggleButton {
                    horizontalAlignment: HorizontalAlignment.Right
                }
            }

 

 

Does anyone has an idea about this ? Is there a simple way to have centered content with a fullscreen background ? I already tried a lot of different way but none gave me the result I wanted (except setting a padding but that's not the way I wanted).

 

Thank you

Please use plain text.
Developer
strobejb
Posts: 267
Registered: ‎10-15-2012
My Device: bb10 developer
My Carrier: Orange

Re: Cascades - Vertical Alignement doesn't work after adding a top container

You might get more answers in the Cascades forum...

Your outer container does not have any height specified, so it shrinks to fit it's content. You need the verticalAlignment.Center property on that outer container instead.

The spaceQuota
Please use plain text.
New Contributor
pipould
Posts: 4
Registered: ‎01-01-2013
My Device: BB10
My Carrier: SFR

Re: Cascades - Vertical Alignement doesn't work after adding a top container

[ Edited ]

Yes, but then how do have a full background ? if I set verticalAlignment.Center to the outer container, I get the same problem as I faced: the background won't be fullscreen (it will occupy only the center, where the components are).

 

PS. If Someone can move the thread to cascades forum, thx :smileyhappy:

Please use plain text.
New Contributor
pipould
Posts: 4
Registered: ‎01-01-2013
My Device: BB10
My Carrier: SFR

Re: Cascades - Vertical Alignement doesn't work after adding a top container

[ Edited ]

 

This is what I have :

 

 

 

 This I what I want to have, but with centered compents:

 

Please use plain text.
Developer
Zmey
Posts: 1,507
Registered: ‎12-18-2012
My Device: PlayBook, Z10, DAC

Re: Cascades - Vertical Alignement doesn't work after adding a top container

Add an empty container with spaceQuota 1 to the bottom. It will take all the remaining space.

Container {
  layoutProperties: StackLayoutProperties {
    spaceQuota: 1
  }
}

If you want to center the controls, add another empty container before them.

Also try playing with preferredWidth: Infinity / preferredHeight: Infinity and different alignment modes (Fill or Center).


Andrey Fidrya, @zmeyc on twitter
Please use plain text.
New Contributor
pipould
Posts: 4
Registered: ‎01-01-2013
My Device: BB10
My Carrier: SFR

Re: Cascades - Vertical Alignement doesn't work after adding a top container

[ Edited ]

Nice ! It did the trick !

But that's quite a dirty solution... Nokia Qt Components seem a bit more effective for this kind of UI (much more components are available too)... I really wonder what is the "asset" of Cascades UI... (Knowing that Symbian Components ported to BB10 work well).

Please use plain text.
Developer
strobejb
Posts: 267
Registered: ‎10-15-2012
My Device: bb10 developer
My Carrier: Orange

Re: Cascades - Vertical Alignement doesn't work after adding a top container

I think you can just use spaceQuota on the outer container, and it will take all the available space.. i.e. no separate container required
Please use plain text.
Developer
Zmey
Posts: 1,507
Registered: ‎12-18-2012
My Device: PlayBook, Z10, DAC

Re: Cascades - Vertical Alignement doesn't work after adding a top container

This should also work but most likey the content will be top-aligned.

When this issue is fixed it'll be easier to align controls inside of containers:

http://supportforums.blackberry.com/t5/Cascades-Development/Stack-layout-alignment-bug/m-p/2077005#M...

 


Andrey Fidrya, @zmeyc on twitter
Please use plain text.