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: 146
Registered: ‎07-03-2013
My Device: BB 9360
My Carrier: WIND
Accepted Solution

two labels in a single line BUT on the left and right side

Hello, 

I am trying to have 2 labels aigned in a single line but on both side of the container. for instance, 

desired output

 

# start of container

-------------------------------------------------

text1                                               text2

...

-------------------------------------------------

#end of container

 

for getting two labels in a single line, i can use StackLayout and use its orientation property (LeftToRight). but i get the following output:

 

# start of container

-------------------------------------------------

text1text2

...

-------------------------------------------------

#end of container

 

If i use GridLayout and use HorizontalAlignment.left and HorizontalAlignment.Right on both the labels, i get the following output:

# start of container

-------------------------------------------------

text1                                              

text2

...

-------------------------------------------------

#end of container

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: two labels in a single line BUT on the left and right side

[ Edited ]

Use a DockLayout, with one Label set to

 

horizontalAlignment: HorizontalAlignment.Left

 

and the other to

 

horizontalAlignment: HorizontalAlignment.Right


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: 146
Registered: ‎07-03-2013
My Device: BB 9360
My Carrier: WIND

Re: two labels in a single line BUT on the left and right side

Sorry, i have no idea how to delete a post, because i didnt finish writing this whole post, my other post did talk about DockLayout. 

the link to the post can be found at (Just got deleted now).

Anyways, if i use the DockLayout, i get the following output:

# start of container

-------------------------------------------------

text1                                              

                                                        text2

...

-------------------------------------------------

#end of container

 

Developer
Posts: 146
Registered: ‎07-03-2013
My Device: BB 9360
My Carrier: WIND

Re: two labels in a single line BUT on the left and right side

Or do you suggest something like:

 

Container {
      layout: StackLayout {
          orientation: LayoutOrientation.LeftToRight
      }
 
     Container{
          DockLayout {
          }
          Label {
              horizontalAlignment: HorizontalAlignment.Left
              text: ....
          }
     }

     Container{
          DockLayout {
          }
          Label {
              horizontalAlignment: HorizontalAlignment.Right
              text: ....
          }
     }

} // end of main container, which has StackLayout

 

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: two labels in a single line BUT on the left and right side

[ Edited ]

You can edit a post rather than posting another by clicking on the options link at the top left of the post.

 

No I wouldn't do it that way. Smiley Happy


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: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: two labels in a single line BUT on the left and right side

Why doesn't this work...

 

Page {
    Container {
        layout: DockLayout { }
        Label {
            horizontalAlignment: HorizontalAlignment.Left
            verticalAlignment: VerticalAlignment.Top
            text: "On the left"
        }
        Label {
            horizontalAlignment: HorizontalAlignment.Right
            verticalAlignment: VerticalAlignment.Top
            text: "On the Right"
        }
    }
}

 


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: 146
Registered: ‎07-03-2013
My Device: BB 9360
My Carrier: WIND

Re: two labels in a single line BUT on the left and right side

I am gonna try your code and will let you know soon.
Of course, close the thread once it seems to ( working.
Thanks
Developer
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: two labels in a single line BUT on the left and right side

A possible issue with using DockLayout is if the Labels may be long enough that they would overlap. DockLayout treats each of the 9 positions that it understands independently, so it will happily slap them onto the left and right edges and if they overlap, it doesn't care in the least.

If that's possible, you could also use a StackLayout with a LeftToRight orientation, and insert an empty Container in between the two Labels, with a layoutProperties: StackLayoutProperties { spaceQuota: 1} on it, and I think you also need to force it to have a width and/or height or it may sort of optimize itself into not appearing at all.

This should "push" the two Labels apart, as though there were a spring in between them, and then the second one should end up at the right edge.

Again depending on the specifics, you could also possibly just put that layoutProperties on the first Label and not even need the middle Container.

Experiment with the different options and compare. Make sure if you're going to have the app translated for multiple locales that one of the languages doesn't end up with the text long enough that they would overlap, if you do use the DockLayout.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
Posts: 146
Registered: ‎07-03-2013
My Device: BB 9360
My Carrier: WIND

Re: two labels in a single line BUT on the left and right side

Thanks Peter!

I will try it out soon and post an update here!

 

 

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

Re: two labels in a single line BUT on the left and right side

I'll just point out that there is no perfect solution to your problem as Peter's solution suffers, as does mine, from any long amount of text being faded out.
Anticipating your next question yes this can be partially solved by using multiple line fields on both solutions.

This all comes down to whether you can control the length of the text and the size of the font or not.

To avoid overlap on using DockLayout all you have to do is attach a LayoutUpdateHandler and set the label width appropriately.

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.