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
jmoukel
Posts: 111
Registered: ‎07-05-2012
My Device: none
Accepted Solution

BB10: QML Labels Alignment Problem

Hi guys,

 

I have a little problem with labels in QML.

 

I have a LeftToRight Stack-layout Container. Inside it i put two labels: "title:" and "my text". See figure 1.

 

In some cases, "my text" could contain a longer text ("my longer text" for example). When that happens, I want those labels to behave as in figure 2. I mean, "my longer text" should go out of the screen on the right side.


 

The problem is that, they behave like in figure 3. It's like if "my longer text" gets horizontally centered and then it overlaps "title:".


 

Any idea about how to solve this?

 

Thanks!

Developer
igosoft
Posts: 71
Registered: ‎09-19-2012
My Device: Z10 very soon

Re: BB10: QML Labels Alignment Problem

 

please show us your QMLs

Developer
jmoukel
Posts: 111
Registered: ‎07-05-2012
My Device: none

Re: BB10: QML Labels Alignment Problem

 

Page
{
    Container
    {
        layout: StackLayout{
            orientation: LayoutOrientation.LeftToRight    
        }

        Label
        {
            text: "title:"

            rightMargin: 5    
            
            // Style      
            textStyle
            {
                base: titles.style 
            }
        }

        Label
        {
            text: "my longer text"

            leftMargin: 5    
            
            // Style      
            textStyle
            {
                base: content.style 
            }
        }
    }

    // Attached objects
    attachedObjects: 
    [           
        // Text style for titles
        TextStyleDefinition
        {
          id: titles
          base: SystemDefaults.TextStyles.BodyText
          color: Color.create("#EAEAEA")
          fontWeight: FontWeight.Normal
          fontSize: FontSize.Small   
        },
        
        // Text style for content
        TextStyleDefinition
        {
          id: content
          base: SystemDefaults.TextStyles.BodyText
          color: Color.create("#6B5F5F")
          fontWeight: FontWeight.Normal
          fontSize: FontSize.Small     
        }
    ]
}

 

Developer
strobejb
Posts: 282
Registered: ‎10-15-2012
My Device: bb10 developer

Re: BB10: QML Labels Alignment Problem

An alternative would to be to use a single label and HTML styling to make the different colours?
Developer
jmoukel
Posts: 111
Registered: ‎07-05-2012
My Device: none

Re: BB10: QML Labels Alignment Problem

I know. But I'd rather do it using Plain Text format (not HTML format).

Thanks strobejb.
Developer
igosoft
Posts: 71
Registered: ‎09-19-2012
My Device: Z10 very soon

Re: BB10: QML Labels Alignment Problem

[ Edited ]

encapsulate each Label with Container and set maxWidth for each Container

 

Container {
Label { text: "title:" rightMargin: 5 // Style textStyle { base: titles.style } } }
Container { Label { text: "my longer text" leftMargin: 5 // Style textStyle { base: content.style } }
}

 

Developer
jmoukel
Posts: 111
Registered: ‎07-05-2012
My Device: none

Re: BB10: QML Labels Alignment Problem

It didn't work.

 

Thanks though igosot.

Developer
Zmey
Posts: 1,515
Registered: ‎12-18-2012
My Device: PlayBook, Z10, DAC

Re: BB10: QML Labels Alignment Problem

Hi,
Try adding
layoutProperties: StackLayoutProperties {
spaceQuota: 1
}

to the second Label.

Andrey Fidrya, @zmeyc on twitter
Developer
igosoft
Posts: 71
Registered: ‎09-19-2012
My Device: Z10 very soon

Re: BB10: QML Labels Alignment Problem

you can also try to set maxWidth property for each Label or Conatiner

Developer
jmoukel
Posts: 111
Registered: ‎07-05-2012
My Device: none

Re: BB10: QML Labels Alignment Problem

Thanks again Zmey,

it worked!

It works because controls with no spaceQuota defined (like label "title:") are given priority (regarding space) over controls with a spaceQuota larger than 0.