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

QML layout problem

I consider myself fairly competent with QML but can't get this working.

I'd like a ScrollView at the top of the screen and a multiline label at the bottom, the tricky bit is to get it working on both the Z10 and Q10 formats within a single file.

 

***********************

*                            *

*                            *

*      ScrollView      *

*                            *

*                            *

*                            *

***********************

*        Multiline      *

*           Text          *

***********************

 

Dock and Absolute won't work as they hide the text or overlap depending on the order, which leaves StackLayout.

The problem with this is that using Infinity on the ScrollView turns the multiline in to a single line, using absolute values means the text is not at the bottom on the Z10.

 

Any ideas?

 


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,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: QML layout problem

You need some way of deciding how much of the available space to partition to the two controls. How would you describe to a human what heuristic you would like to use to decide how big these things should be?

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: 410
Registered: ‎06-03-2010
My Device: Z10 Red
My Carrier: Free

Re: QML layout problem

This worked For me:

 

// Segmented control navigation project template
import bb.cascades 1.0
import com.rim.example.custom 1.0

Page {
    content: Container {
        
        layout: StackLayout {
            orientation: LayoutOrientation.TopToBottom
        }
        ScrollView {
            Container {
                Label{
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
                Label {
                    text: "texte"
                }
            }
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1
            }
        }
        Label {
            text: "texte vdsgkso pkbop kbr kbrk oerkb)eobk kebo)kr )bkerbk)oerk b)ekorkbitojkqnjkbnbn ibni nqrjibn inqrb oqrjib pqbj"
            multiline: true
            layoutProperties: StackLayoutProperties {
                spaceQuota: -1
            }
        }
    }
}

 

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

Re: QML layout problem

Thanks Hithredin, but see what happens when you change the labels within the ScrollView to multiline, they cease to be multiline.

 

I think this is a case of trying so many combinations that your brain freezes. Smiley Frustrated

 


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: QML layout problem

[ Edited ]

Disregard the last message as I'd removed the ScrollView putting it back reenables the multiline on the ScrollView labels.

 

However this still doesn't work as if the sum of the heights of the controls within the ScrollView is less than the size of the Page minus the bottom label height then the bottom Label moves up and is no longer pushed to the bottom.

 

Take out the majority of your labels and run it on the Z10 and you'll see what I mean.

 

There has to be some combination of properties that forces the ScrollView to maximise the space while not affecting the bottom label?

 


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: 410
Registered: ‎06-03-2010
My Device: Z10 Red
My Carrier: Free

Re: QML layout problem

Ok I think I see the point. And if you put the scrollview inside another container, then the spaceQuota will be calculated:

 

// Segmented control navigation project template
import bb.cascades 1.0
import com.rim.example.custom 1.0

Page {
    content: Container {

        layout: StackLayout {
            orientation: LayoutOrientation.TopToBottom
        }
        Container {
            ScrollView {
                Container {
                    Label {
                        text: "texte"
                    }
                    Label {
                        text: "texte"
                    }
                    Label {
                        text: "texte"
                    }
                }
            }
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1
            }
        }
        Label {
            text: "texte vdsgkso pkbop kbr kbrk oerkb)eobk kebo)kr )bkerbk)oerk b)ekorkbitojkqnjkbnbn ibni nqrjibn inqrb oqrjib pqbj"
            multiline: true
            layoutProperties: StackLayoutProperties {
                spaceQuota: -1
            }
        }
    }
}

 

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

Re: QML layout problem

[ Edited ]

I can't tell you how long I've been trying to do this but I finally seem to have it working, I could have sworn I'd already tried this but there you go.

 

Placing a preferredHeight: Infinity in the ScrollView container forces the label to the bottom no matter what the contents.

 

Finally I can have a ScrollView with dynamic contents consistant across devices.

 

[Edit] Setting the container spaceQuota to 1 didn't work for me, possibly because of more complicated ScrollView contents.

 


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: QML layout problem

This is the solution I'm currently using for those trying to achieve the same thing, only slightly different from Hithredin's solution;

 

// Segmented control navigation project template
import bb.cascades 1.0
import com.rim.example.custom 1.0

Page {
    content: Container {

        layout: StackLayout {
            orientation: LayoutOrientation.TopToBottom
        }
            ScrollView {
                Container {
                    preferredHeight: Infinity Label { text: "texte" } Label { text: "texte" } Label { text: "texte" } } } layoutProperties: StackLayoutProperties { spaceQuota: 1 } } Label { text: "texte vdsgkso pkbop kbr kbrk oerkb)eobk kebo)kr )bkerbk)oerk b)ekorkbitojkqnjkbnbn ibni nqrjibn inqrb oqrjib pqbj" multiline: true layoutProperties: StackLayoutProperties { spaceQuota: -1 } } } }

 I've used Hithredin's example as mine's full of code creating dynamic content within the scrollview and not relevant to this problem.


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.
Highlighted
Contributor
Posts: 31
Registered: ‎09-25-2012
My Device: N/A
My Carrier: Rogers

Re: QML layout problem

I know this has been solved but i also found setting verticalAlignment of the scrollView to VerticalAlignment.Fill worked

 

import bb.cascades 1.0

Page {
content: Container {

layout: StackLayout {
}
ScrollView {
verticalAlignment: VerticalAlignment.Fill

Container {
Label {
text: "texte\r\nHello"
multiline: true
}
Label {
text: "texte\r\nHello"
multiline: true
}
Label {
text: "texte\r\nHello"
multiline: true
}
Label {
text: "texte\r\nHello"
multiline: true
}
Label {
text: "texte\r\nHello"
multiline: true
}
Label {
text: "texte\r\nHello"
multiline: true
}
Label {
text: "texte\r\nHello"
multiline: true
}
Label {
text: "texte\r\nHello"
multiline: true
}

}
layoutProperties: StackLayoutProperties {
spaceQuota: 1
}
}

Label {
verticalAlignment: VerticalAlignment.Bottom
text: "texte vdsgkso pkbop kbr kbrk oerkb)eobk kebo)kr )bkerbk)oerk b)ekorkbitojkqnjkbnbn ibni nqrjibn inqrb oqrjib pqbj"
multiline: true
layoutProperties: StackLayoutProperties {
spaceQuota: -1
}
}
}
}

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

Re: QML layout problem

@Hithredin, I've got your solution working but both our solutions come with problems.

 

With mine the scroll looks to terminate at the correct place (i.e. just above the bottom label) but you can then scroll forever losing the contents.

 

With yours there is a gap between the bottom of the scrollview and the bottom label when contents don't stretch the container up to and past the top of the bottom label.

 

I'm still convinced this is possible. 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.