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
Contributor
Posts: 19
Registered: ‎01-31-2013
My Device: Blackberry Curve 8900
My Carrier: Rogers

TextFields and Messing up the Layout in my QML

Hey Guys,

 

I've created a simple QML container with Two textfields in it, and for some reason when the keyboard comes up from clicking on the textfield it scales everything down to allow the keyboard to come up but the textfields stay inplace.

 

My question is do I need to translate/scale the textfields into position when the text field gets touched? and if thats the case what signal do I use?

 

import bb.cascades 1.0

Container {
    layout: DockLayout {
    }
    id: rootContainer
    background: back.imagePaint
    ImageView {
        imageSource: "asset:///images/info.png"
        scalingMethod: ScalingMethod.AspectFit
        verticalAlignment: VerticalAlignment.Top
        horizontalAlignment: HorizontalAlignment.Center
    }
    Container {
        //translationY: 530.0
        layout: StackLayout {
        }
        Container {
            minHeight: 530.0
            maxHeight: 530.0
        }
        Container {
            id: aniOneContainer
            //translationY: 470.0
            minWidth: 490.0
            maxWidth: 490.0
            //translationX: 120.0
            maxHeight: 127.0
            minHeight: 127.0
            focusPolicy: FocusPolicy.Touch
            TextField {
                id: aniOne
                objectName: "aniOne"
                inputMode: TextFieldInputMode.PhoneNumber
                //autoFit: TextAutoFit.None
                input.submitKey: SubmitKey.Next
                hintText: "Please Enter Your Phone Number"
                textStyle.fontSize: FontSize.XSmall
                textStyle.fontStyle: FontStyle.Normal
                textStyle.textAlign: TextAlign.Left
            }
            
        }
       
        Container {
            minHeight: 20.0
            maxHeight: 20.0
        }
        Container {
            //translationY: 630.0
            minWidth: 503.0
            maxWidth: 503.0
            //translationX: 120.0
            maxHeight: 127.0
            minHeight: 127.0
            TextField {
                id: aniTwo
                objectName: "aniTwo"
                inputMode: TextFieldInputMode.PhoneNumber
                //autoFit: TextAutoFit.None
                input.submitKey: SubmitKey.Next
                hintText: "Re-enter Phone Number"
                //translationY: 60.0
                textStyle.fontSize: FontSize.XSmall
                textStyle.fontStyle: FontStyle.Normal
                textStyle.textAlign: TextAlign.Left
            }
        }
        Container {
            minHeight: 20.0
            maxHeight: 20.0
        }
        Container {
            verticalAlignment: VerticalAlignment.Bottom
            //translationY: -350.0
            //scaleX: 1.0
            //scaleY: 1.0
            //translationX: 440.0
            ImageButton {
                objectName: "confirmButton"
                defaultImageSource: "asset:///images/confirm.png"
                onClicked: {
                    var createdControl;
                    if (aniOne.text == aniTwo.text) {
                        ptaxiApp.saveValueFor("ani", aniOne.text);
                        ptaxiApp.executeMobileAniAPI(aniOne.text);
                        createdControl = step2.createObject();
                    } else {
                        createdControl = error_badphonenumber.createObject();
                    }
                    mainContainer.add(createdControl);
                }
            }
            attachedObjects: [
                ComponentDefinition {
                    id: step2
                    source: "step2.qml"
                },
                ComponentDefinition {
                    id: error_badphonenumber
                    source: "error_badphonenumber.qml"
                }
            ]
        }
        onCreationCompleted: {
            var ani = ptaxiApp.getValueFor("ani", "false");
            if (ani != "false") {
                aniOne.text = ani;
                aniTwo.text = ani;
            }
        }
        horizontalAlignment: HorizontalAlignment.Center
    }
    attachedObjects: [
        ImagePaintDefinition {
            id: back
            imageSource: "asset:///images/transparent_bg.png"
        }
    ]
}

 

Developer
Posts: 207
Registered: ‎02-10-2011
My Device: Playbook 16GB and Z10
My Carrier: Verizon

Re: TextFields and Messing up the Layout in my QML

To keep your other graphics from scaling or changing when the keyboard comes up you need to use layout: AbsoluteLayout for the components that you don't want to change.
_________________________________________________
Apps
Go Music
Flashlight Fast Free/Pro
Fitbit for BlackBerry PlayBook
Contributor
Posts: 19
Registered: ‎01-31-2013
My Device: Blackberry Curve 8900
My Carrier: Rogers

Re: TextFields and Messing up the Layout in my QML

i like the idea of it rescaling, is it possible to have the text fields adopt that attribute?