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: 206
Registered: ‎05-15-2012
My Device: None
My Carrier: Telus

DockLayout Element Overlap

I have a docklayout container within another container with absolute layout, here's the docklayout container definition

 

        Container *centerContainer = new Container();
	AbsoluteLayoutProperties *props = new AbsoluteLayoutProperties();
	props->setPositionX(140.0f);
	centerContainer->setLayoutProperties(props);
	centerContainer->setMaxWidth(483.0f);
	centerContainer->setMinWidth(483.0f);
	centerContainer->setMinHeight(150.0f);
	centerContainer->setBottomPadding(10.0f);
	centerContainer->setTopPadding(5.0f);
	centerContainer->setLeftPadding(5.0f);
	centerContainer->setRightPadding(5.0f);
	DockLayout *centerLayout = new DockLayout();
	centerContainer->setLayout(centerLayout);

 This container has three elements inserted into it. A multi-line label and two single line labels, defined as follows:

 

    m_Title =  Label::create().text("TITLE1").textStyle(m_TitleStyle).multiline(true);
    m_Title->setHorizontalAlignment(HorizontalAlignment::Left);
    m_Title->setVerticalAlignment(VerticalAlignment::Top);
    //m_Title->setBottomPadding(5.0f);
    m_Sub = Label::create().text("D_SUB").textStyle(m_SubStyle);
    m_Sub->setHorizontalAlignment(HorizontalAlignment::Left);
    m_Sub->setVerticalAlignment(VerticalAlignment::Bottom);
    //m_Sub->setTopPadding(5.0f);
    TextStyle commentsStyle = m_SubStyle;
    commentsStyle.setTextAlign(TextAlign::Right);
    m_Num = Label::create().text("D_NUM").textStyle(commentsStyle);
    m_Num->setHorizontalAlignment(HorizontalAlignment::Right);
    m_Num->setVerticalAlignment(VerticalAlignment::Bottom);
    //m_Num->setTopPadding(5.0f);
    centerContainer->add(m_Title);
    centerContainer->add(m_Sub);
    centerContainer->add(m_Num);

 

There are no restrictions placed on the the height of the center container (or the outer container the center container is within). ie. no preferredHeight or maxHeight (although i do have minHeight set).

 

Why do these labels overlap? When the top label is set to a long string of text it will overlap the other two labels which are stuck to the bottom left and right of the container. Is overlapping expected behavior of docklayout? Had I assigned some height restriction to the container this might make sense, but this behavior does not seem optimal to me when the container is free to take more height to avoid the overlap.

 

Giving the elements in the docklayout any sort of padding facing eachother does not appear to change the overlapping behavior.

 

I've attached an image explaining the issue graphically:

DockLayoutIssue.png

 

- Brennan

----------------------
Check out my app, Alien Flow for reddit

And of course, like my post if you found it helpful or informative!
Developer
Posts: 206
Registered: ‎05-15-2012
My Device: None
My Carrier: Telus

Re: DockLayout Element Overlap

Can anybody confirm or deny there is an issue with DockLayout and multiline labels, as I am noticing?
----------------------
Check out my app, Alien Flow for reddit

And of course, like my post if you found it helpful or informative!
Developer
Posts: 526
Registered: ‎05-17-2009
My Device: 9900
My Carrier: ATT

Re: DockLayout Element Overlap

I dont think its an issue, it seems like its working as expected. If the label takes up more than minHeight the container will grow to the size needed for the label in which case the other controls in the dock layout will still be positioned in the same place, making them overlap. What you really should do is have a stack layout top to bottom, then a dock layout for the bottom two to put them in the respective corners
Like all of my posts