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
Tobster_
Posts: 217
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK
Accepted Solution

FreeForm TitleBar not displaying correctly on Q Devices

Hello, 

 

I am using a FreeForm TitleBar within my application on the Z10 & Z30 it displays correctly but on Q devices the top two options are cut off.

 

Here is the code that I am using:

 

titleBar: TitleBar {
                    kind: TitleBarKind.FreeForm
                    kindProperties: FreeFormTitleBarKindProperties {
                        Container {
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }
                            leftPadding: 10.0
                            rightPadding: 10.0
                            Label {
                                text: radioGroup.selectedOption.text
                                textStyle {
                                    color: Color.White
                                }
                                verticalAlignment: VerticalAlignment.Center
                                layoutProperties: StackLayoutProperties {
                                    spaceQuota: 1
                                }
                            }
                            ImageView {
                                id: toggleExpanded
                                property bool checked: false

                                onTouch: {
                                    if (checked == false) {
                                        if (event.touchType == TouchType.Down) {

                                        } else if (event.touchType == TouchType.Move) {

                                        } else if (event.touchType == TouchType.Up) {
                                            rt1.play()
                                            checked = true
                                        }
                                    } else {
                                        if (event.touchType == TouchType.Down) {

                                        } else if (event.touchType == TouchType.Move) {

                                        } else if (event.touchType == TouchType.Up) {
                                            rt2.play()
                                            checked = false
                                        }
                                    }
                                }

                                animations: [
                                    RotateTransition {
                                        id: rt1
                                        duration: 150
                                        toAngleZ: -180.0
                                        fromAngleZ: 0.0
                                        easingCurve: StockCurve.CubicIn

                                    },
                                    RotateTransition {
                                        id: rt2
                                        duration: 150
                                        toAngleZ: 0
                                        fromAngleZ: -180.0
                                        easingCurve: StockCurve.CubicIn

                                    }
                                ]
                                imageSource: "asset:///IMG/ic_to_bottom.png"
                                verticalAlignment: VerticalAlignment.Center
                                horizontalAlignment: HorizontalAlignment.Center
                            }
                        }
                        expandableArea {
                            content: RadioGroup {
                                id: radioGroup
                                Option {
                                    id: au
                                    text: "Australia"
                                    value: "http://m.ebay.com.au"
                                    description: "$, AUD"
                                }
                                Option {
                                    id: ca
                                    text: "Canada"
                                    value: "http://m.ebay.ca"
                                    description: "$, CAD"
                                }
                                Option {
                                    id: de
                                    text: "Germany"
                                    value: "http://m.ebay.de"
                                    description: "€, EUR"
                                }
                                Option {
                                    id: fr
                                    text: "France"
                                    value: "http://m.ebay.fr"
                                    description: "€, EUR"
                                }
                                Option {
                                    id: it
                                    text: "Italy"
                                    value: "http://m.ebay.it"
                                    description: "€, EUR"
                                }
                                Option {
                                    id: uk
                                    text: "United Kingdom"
                                    value: "http://m.ebay.co.uk"
                                    selected: true
                                    description: "£, GBP"
                                }
                                Option {
                                    id: us
                                    text: "United States of America"
                                    value: "http://m.ebay.com"
                                    description: "$, USD"
                                }
                                onSelectedOptionChanged: {
                                    rt2.play()
                                    toggleExpanded.checked = false
                                    eBayUK.url = selectedValue
                                    _app.saveValueFor("defaultUrl", radioGroup.selectedIndex)
                                }
                                dividersVisible: true
                                onCreationCompleted: {
                                    radioGroup.selectedIndex = cpp.getValueFor("defaultUrl", 0)
                                    eBayUK.url = selectedValue
                                }
                                topMargin: 20.0
                            }
                            indicatorVisibility: TitleBarExpandableAreaIndicatorVisibility.Hidden
                            expanded: toggleExpanded.checked
                            onExpandedChanged: {
                                toggleExpanded.checked = expanded
                                if (expanded) {
                                    page1.actionBarVisibility = ChromeVisibility.Hidden
                                } else {
                                    page1.actionBarVisibility = ChromeVisibility.Visible
                                }
                            }
                        }
                    }
                }

 As you can see I have added 

 

onExpandedChanged: {
                                toggleExpanded.checked = expanded
                                if (expanded) {
                                    page1.actionBarVisibility = ChromeVisibility.Hidden
                                } else {
                                    page1.actionBarVisibility = ChromeVisibility.Visible
                                }

so that when the toggle is expanded the actionBar is not visible, that gives a little extra space but the two options at the top are still barely visible. I have tried altering the text size, but I cannot think of anything else.

 

Any help and guidance towards this would be very helpful.

 

Thank you :smileyhappy: 

Please use plain text.
Developer
Tobster_
Posts: 217
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: FreeForm TitleBar not displaying correctly on Q Devices

Managed to sort it by altering the content and adding a scroll view

Please use plain text.