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

Scrollview center vertically

import bb.cascades 1.0
Page {
    Container {
        background: style.bgColor
        Container {
            
            preferredWidth: Infinity
            background: style.black
            TopBar {
                id: bar
                layoutProperties: StackLayoutProperties {
                    spaceQuota: -1
                }
            }
            layoutProperties: StackLayoutProperties {
                spaceQuota: -1
            }
        }
        ScrollView {
            id: scrollView
            verticalAlignment: VerticalAlignment.Center
            Container {
                leftPadding: 20
                rightPadding: 20
                bottomPadding: 20
                topPadding: 20
                layout: StackLayout {
                    orientation: LayoutOrientation.TopToBottom
                }
                
                
                TextField {
                    inputMode: TextFieldInputMode.NumbersAndPunctuation
                    hintText: qsTr("accountNumber") + Retranslate.onLocaleOrLanguageChanged
                }
                TextField {
                    inputMode: TextFieldInputMode.NumbersAndPunctuation
                    hintText: qsTr("accountNumber") + Retranslate.onLocaleOrLanguageChanged
                }
                TextField {
                    inputMode:  TextFieldInputMode.NumbersAndPunctuation
                    hintText: qsTr("customerId") + Retranslate.onLocaleOrLanguageChanged
                }
                TextField {
                    inputMode:  TextFieldInputMode.PhoneNumber
                    hintText: qsTr("mobileNumber") + Retranslate.onLocaleOrLanguageChanged
                }
                TextField {
                    inputMode:  TextFieldInputMode.Text
                    hintText: qsTr("dateOfBirth") + Retranslate.onLocaleOrLanguageChanged
                }
                TextField {
                    inputMode: TextFieldInputMode.Text
                    hintText: qsTr("userName") + Retranslate.onLocaleOrLanguageChanged
                }
                Button {
                    text: qsTr("submit") + Retranslate.onLocaleOrLanguageChanged
                    preferredWidth: Infinity
                    onClicked: {
                        alkhaliji.login();
                    }
                }
            
            }
           
        
            scrollViewProperties {
                scrollMode: ScrollMode.Vertical
            }
        }
    }
}

 

 

I have this form, which user has to fill. My issue here is that I want the scrollview to be in middle of screen.

On Q10 it doesnt make difference it takes bottom and top padding 20. But on z10 since screen is large, it takes top padding 20..but bottom padding it takes the entire bottom of screen.I want it to be  vertically centered in z10.

 

Please use plain text.
Developer
babakar
Posts: 738
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: Scrollview center vertically

import bb.cascades 1.0
Page {
    Container {
        background: style.bgColor
        Container {

            preferredWidth: Infinity
            background: style.black
            TopBar {
                id: bar
                layoutProperties: StackLayoutProperties {
                    spaceQuota: -1
                }
            }
            layoutProperties: StackLayoutProperties {
                spaceQuota: -1
            }
        }
        Container {
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1
            }
        }
        Container {
            leftPadding: 20
            rightPadding: 20
            bottomPadding: 20
            verticalAlignment: verticalAlignment.Center
            layout: StackLayout {
                orientation: LayoutOrientation.TopToBottom
            }

            TextField {
                inputMode: TextFieldInputMode.Text
                hintText: qsTr("username") + Retranslate.onLocaleOrLanguageChanged
            }
            TextField {
                inputMode: TextFieldInputMode.Password
                hintText: qsTr("password") + Retranslate.onLocaleOrLanguageChanged
            }
            Button {
                text: qsTr("submit") + Retranslate.onLocaleOrLanguageChanged
                preferredWidth: Infinity
                onClicked: {
                    alkhaliji.login();
                }
            }

        }
        Container {
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1
            }
        }
    }
}

 

 

when not using scrollview i solved it this way to be vertically centered, it takes same distance from top and bottom.

Please use plain text.
Developer
babakar
Posts: 738
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: Scrollview center vertically

this is what I have now, it starts building it from

 

how can I do it to have same amount of padding between bottom and top in case scrollbar is not needed ( like in z10 , in q10 u would get bottom + top padding 20 )

 

import bb.cascades 1.0
Page {
    Container {
        background: style.bgColor
        layout: StackLayout {
            orientation: LayoutOrientation.TopToBottom
        }
        preferredHeight: Infinity
        Container {
            
            preferredWidth: Infinity
            background: style.black
            TopBar {
                id: bar
                layoutProperties: StackLayoutProperties {
                    spaceQuota: -1
                }
            }
            layoutProperties: StackLayoutProperties {
                spaceQuota: -1
            }
        }
        Container {
            leftPadding: 20
            rightPadding: 20
            bottomPadding: 20
            topPadding:  20
           verticalAlignment: VerticalAlignment.Fill
            layout: StackLayout {
                orientation: LayoutOrientation.TopToBottom
            }
        ScrollView {
            id: scrollView         
            verticalAlignment: VerticalAlignment.Fill
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.TopToBottom
                }
             
                
                TextField {
                    inputMode: TextFieldInputMode.NumbersAndPunctuation
                    hintText: qsTr("accountNumber") + Retranslate.onLocaleOrLanguageChanged
                }
                TextField {
                    inputMode: TextFieldInputMode.NumbersAndPunctuation
                    hintText: qsTr("accountNumber") + Retranslate.onLocaleOrLanguageChanged
                }
                TextField {
                    inputMode:  TextFieldInputMode.NumbersAndPunctuation
                    hintText: qsTr("customerId") + Retranslate.onLocaleOrLanguageChanged
                }
                TextField {
                    inputMode:  TextFieldInputMode.PhoneNumber
                    hintText: qsTr("mobileNumber") + Retranslate.onLocaleOrLanguageChanged
                }
                TextField {
                    inputMode:  TextFieldInputMode.Text
                    hintText: qsTr("dateOfBirth") + Retranslate.onLocaleOrLanguageChanged
                }
                TextField {
                    inputMode: TextFieldInputMode.Text
                    hintText: qsTr("userName") + Retranslate.onLocaleOrLanguageChanged
                }
                Button {
                    text: qsTr("submit") + Retranslate.onLocaleOrLanguageChanged
                    preferredWidth: Infinity
                    onClicked: {
                        alkhaliji.login();
                    }
                }
            }
           
        
            scrollViewProperties {
                scrollMode: ScrollMode.Vertical
            }
        }
        }
    }
}

 

Please use plain text.
Developer
babakar
Posts: 738
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: Scrollview center vertically

 I have my scrollview doing verticalalignment fill, and center my container in it..

its not working.

Please use plain text.
Developer
babakar
Posts: 738
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: Scrollview center vertically

Please use plain text.
Developer
babakar
Posts: 738
Registered: ‎05-29-2012
My Device: see later
My Carrier: see later

Re: Scrollview center vertically

Solved this way

 

 Container {
            layout: DockLayout {
                
            }
            
        ScrollView {
            id: scrollView 
                    
            verticalAlignment: VerticalAlignment.Center

 

Please use plain text.