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
Developer
Posts: 813
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later
Accepted Solution

Container padding not working

import bb.cascades 1.2
Page {
    Container {
        background: Color.LightGray
        Container {
            topPadding: 20
            leftPadding: 20
            ImageView {
                imageSource: "asset:///images/ic_logo_black.png"
                preferredWidth: DisplayInfo.width-50
                preferredHeight: (DisplayInfo.width-50)/3.71
            }
        }
        Container {
         
            
            preferredWidth: DisplayInfo.width
            leftPadding: 60
            rightPadding: 60
            preferredHeight: (DisplayInfo.height-(((DisplayInfo.width-50)/3.71)+20))-60
            layout: StackLayout {
                orientation: LayoutOrientation.BottomToTop
            }
            Container 
            {
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }
               Container {
                   layout: StackLayout {
                       orientation: LayoutOrientation.BottomToTop
                   }
                   background: Color.Black
                   preferredWidth: (DisplayInfo.width - 180)/3
                   preferredHeight: (DisplayInfo.width - 180)/3
               }
               Container {
                   leftPadding: 30.0
                   layout: StackLayout {
                       orientation: LayoutOrientation.BottomToTop
                   }
                   background: Color.Black
                   preferredWidth: (DisplayInfo.width - 180)/3
                   preferredHeight: (DisplayInfo.width - 180)/3
               }
               Container {
                   leftPadding: 30.0
                   layout: StackLayout {
                       orientation: LayoutOrientation.BottomToTop
                   }
                   background: Color.Black
                   preferredWidth: (DisplayInfo.width - 180)/3
                   preferredHeight: (DisplayInfo.width - 180)/3
               }
            }
        }
    }
}

 

 

 

the bolded part isnt working, i would have at bottom of page 3 containers next to each other..seperated by padding 30..but padding 30 not working.

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Container padding not working

[ Edited ]

Hi,

I think padding affects items inside of container. Try settings leftMargin/rightMargin instead.

If adjacent containers have margins, the largest margin will be used.

Btw, it's better to attach LayoutUpdateHandler to a Container and use it's layoutFrame property for size calculations. DisplayInfo won't take screen rotation into account.

http://developer.blackberry.com/native/reference/cascades/bb__cascades__layoutupdatehandler.html


Andrey Fidrya, @zmeyc on twitter
Highlighted
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Container padding not working

[ Edited ]

Why not use spaceQuotas (and margins) instead rather than all that maths...

 

        Container {
            preferredHeight: 200.0
            rightPadding: 60.0
            leftPadding: 60.0
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }
        	Container {
        	    verticalAlignment: VerticalAlignment.Fill
        	    leftMargin: 15.0
        	    rightMargin: 15.0
        	    background: Color.Red
            	layoutProperties: StackLayoutProperties { spaceQuota: 1.0 } 
            }
            Container {
                verticalAlignment: VerticalAlignment.Fill
                leftMargin: 15.0
                rightMargin: 15.0
                background: Color.Green
                layoutProperties: StackLayoutProperties { spaceQuota: 1.0 } 
            }
            Container {
                verticalAlignment: VerticalAlignment.Fill
                leftMargin: 15.0
                rightMargin: 15.0
                background: Color.Blue
                layoutProperties: StackLayoutProperties { spaceQuota: 1.0 } 
            }
        }

Change the values to what you want, knowing that margins will collapse in to each other.

Paddings only apply to what is inside the container.

 

[Edit] You won't need to use LayoutUpdateHandler then either it will work for any size screen and rotation.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 813
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: Container padding not working

can u give me an example on layoutupdatehandler?

https://developer.blackberry.com/native/reference/cascades/bb__cascades__layoutupdatehandler.html
checking this couldnt much get how to implement it
Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Container padding not working

Declare LayoutUpdateHandler in attachedObjects:[] of Container.

In the sample code in docs it's attached to a Button, but you can attach it to any item including Container.

Assign it an id, then reference it's layoutFrame property:

id.layoutFrame.width

This will return the width of the item to which it's attached to.

But this is rarely needed. Most layouts can be implemented with combination of preferredWidth / spaceQuota.

Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 813
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: Container padding not working

I want my container though at bottom of page

preferredHeight: 200.0
wont help me. i need the whole height left
Developer
Posts: 16,998
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

Re: Container padding not working


babakar wrote:
 i need the whole height left

that's what spaceQuota is for

----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Container padding not working

[ Edited ]

If I understand correctly what you're trying to do, you need to push a container of fixed height to the bottom of page.

 

If it's inside of a container with vertical StackLayout:
1) Set preferredHeight: Ininity to outer container so it fills all the available space.
2) Add another container with spaceQuota: 1 above the container you want to push to the bottom of the page.

 

Sample code to show the idea:

 

Page {
    Container {
        background: Color.Yellow
        layout: StackLayout {}
        horizontalAlignment: HorizontalAlignment.Fill
        preferredHeight: Infinity // I'm not sure if this is needed, might even work without it
        Container {
            horizontalAlignment: HorizontalAlignment.Fill
            preferredHeight: 100
            background: Color.Red            
        }
        Container { // This will fill all space between top and bottom containers
            horizontalAlignment: HorizontalAlignment.Fill
            background: Color.Yellow
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1
            }
        }
        Container {
            horizontalAlignment: HorizontalAlignment.Fill
            preferredHeight: 200
            background: Color.Blue            
        }
    }
}

 

 Another important thing about StackLayouts which is not very intuitive:

 

HorizontalAlignment.Fill (and other horizontal alignment modes) only works in Vertical StackLayout.

VerticalAlignment.Fill (etc) only works in Horizontal StackLayout.

 

 


Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Container padding not working

[ Edited ]

@zmey Back me up here and let this guy know he doesn't need to use the LayoutUpdateHandler, but it is an option.

 

Anyone coming along later and seeing this and clicking to the solution is not getting the right advice.

 

Anyone reading this you should only really need to use LayoutUpdateHandler as a last resort, any layout you can think off is likely to be doable without it. In fact TAT once issued a challange to that effect, that they could produce any layout using just the available layouts.

 

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Container padding not working

@BBSJdev, you are right.

 


Andrey Fidrya, @zmeyc on twitter