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
ravi1989
Posts: 773
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

How to align label and text field in blackberry 10

Hello

 

can you please tell me who to align label and textfield horizontally.as in java we have horizontal manager ?

Please use plain text.
Developer
ravi1989
Posts: 773
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: How to align label and text field in blackberry 10

 

import bb.cascades 1.0

 

// creates one page with a label
Page {
Container {
layout: DockLayout {}
Label {
text: "Name"
}
TextField {
inputMode: TextFieldInputMode.EmailAddress

}
}
}

 

Please use plain text.
Developer
mdodd
Posts: 187
Registered: ‎07-19-2012
My Device: Z10 LE
My Carrier: Three

Re: How to align label and text field in blackberry 10

[ Edited ]

For aligning the text field within the container:

 

horizontalAlignment: HorizontalAlignment.Left

 Values are HorizontalAlignment.Left, HorizontalAlignment.Center, HorizontalAlignment.Right and HorizontalAlignment.Fill.

 

https://developer.blackberry.com/cascades/reference/bb__cascades__horizontalalignment.html

 

In all seriousness, with the number of questions you're posting on the forums, please take some time out read the cascades documentation. If you're in doubt about what properties a cascades component has, please take a look at the documentation for that component or press Ctrl + Space in momentics to get a list of available properties.



Did this post help you? If so, please make sure to "like" it!
Please use plain text.
Developer
ravi1989
Posts: 773
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: How to align label and text field in blackberry 10

it is not working ..:smileysad:

i need like this

 

Name : text field

 

// Default empty project template
import bb.cascades 1.0

// creates one page with a label
Page {
    Container {
        layout: DockLayout {
                    
                }
                
                Label {
                           text:  "Name"
                            horizontalAlignment: HorizontalAlignment.Left
                       }
                       TextField {
                       horizontalAlignment: HorizontalAlignment.Right
                       inputMode: TextFieldInputMode.Password
                       
                       }
       
    }
}

 

Please use plain text.
Developer
mdodd
Posts: 187
Registered: ‎07-19-2012
My Device: Z10 LE
My Carrier: Three

Re: How to align label and text field in blackberry 10

Containers will only ever be as wide as its largest child unless you explicitly tell it otherwise, so if the textField is the largest child you won't see the Centered effect. You'll also need to add horizontalAlignment: HorizontalAlignment.Fill to the parent Container.



Did this post help you? If so, please make sure to "like" it!
Please use plain text.
Developer
ravi1989
Posts: 773
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: How to align label and text field in blackberry 10

// Default empty project template
import bb.cascades 1.0

// creates one page with a label
Page {
    Container {
          horizontalAlignment: HorizontalAlignment.Fill 
        layout: DockLayout {
                  
                }
                
                Label {
                       text:  "Name"
                      //  horizontalAlignment: HorizontalAlignment.Left
                       }
                       TextField {
                       horizontalAlignment: HorizontalAlignment.Right
                       inputMode: TextFieldInputMode.Password
                       
                       }
       
    }
}

 only text field is seen ..:smileysad:

 

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

Re: How to align label and text field in blackberry 10

import bb.cascades 1.0
 
Page {
  Container {
    layout: StackLayout {
        orientation: LayoutOrientation.LeftToRight
    }
    Label {
      text: "Name"
    }
    TextField {
      inputMode: TextFieldInputMode.EmailAddress
    }
  }
}

 


Andrey Fidrya, @zmeyc on twitter
Please use plain text.
Developer
ravi1989
Posts: 773
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: How to align label and text field in blackberry 10

When  i used like this .it show Name and below textfield , not in front . how to show text field in front of name

// Default empty project template
import bb.cascades 1.0

// creates one page with a label
Page {
    Container {
        
        layout: DockLayout {
                  
                }
                Container {
                      horizontalAlignment: HorizontalAlignment.Fill 
                         Label {
                                           text:  "Name"
                                          //  horizontalAlignment: HorizontalAlignment.Left
                                           }
                                           TextField {
                                           horizontalAlignment: HorizontalAlignment.Left
                                           inputMode: TextFieldInputMode.Password
                                           
                                           }
                }
           
       
    }
}

 

 

 

 

Please use plain text.
Developer
mdodd
Posts: 187
Registered: ‎07-19-2012
My Device: Z10 LE
My Carrier: Three

Re: How to align label and text field in blackberry 10

Zmey's solution would be correct in this case.



Did this post help you? If so, please make sure to "like" it!
Please use plain text.
Developer
ravi1989
Posts: 773
Registered: ‎07-21-2012
My Device: 9810
My Carrier: 0

Re: How to align label and text field in blackberry 10

Thaks it works.But when i take second field like class . it show in same line .

if i need to change on next line .than how it is possible

// Default empty project template
import bb.cascades 1.0

// creates one page with a label
Page {
    Container {
        
        layout: StackLayout {
                 orientation:LayoutOrientation.LeftToRight
                }
                
                
                Label {
                      text:  "Name"
                      textStyle {
                   base: SystemDefaults.TextStyles.BigText
              }
                                                         //  horizontalAlignment: HorizontalAlignment.Left
      }
          TextField {
                  horizontalAlignment: HorizontalAlignment.Left
                  inputMode: TextFieldInputMode.Password
                                                          
          }
          
          
                Label {
                                text:  "Class"
                                textStyle {
                             base: SystemDefaults.TextStyles.BigText
                        }
                                                                   //  horizontalAlignment: HorizontalAlignment.Left
                }
                    TextField {
                            horizontalAlignment: HorizontalAlignment.Left
                            inputMode: TextFieldInputMode.Password
                                                                    
                    }
                                                          
                                                          
    }
}

 

Please use plain text.