Titanium

[TIMOB-1437] Horizontal Layout broken on iPad

GitHub Issuen/a
TypeBug
PriorityLow
StatusClosed
ResolutionInvalid
Resolution Date2011-04-15T02:52:26.000+0000
Affected Version/sn/a
Fix Version/sRelease 1.5.0
ComponentsiOS
Labels1.4, defect, horizontal, ios, ipad, layout, sdk
Reporterctredway
AssigneeBlain Hamon
Created2011-04-15T02:52:24.000+0000
Updated2017-03-02T19:15:38.000+0000

Description

The following code does not layout the components in the correct manner.

var viewMore = Ti.UI.createView({

height:20,
width:150,
top: 90,
right: 50,
layout:'horizontal'

});

var labelMore = Titanium.UI.createLabel({

text:"Show More",
font:{fontSize:12,fontWeight:'bold'},
textAlign:'right',
color:'#517ca5',
height:20,
right: 50

});

var imageMore = Titanium.UI.createImageView({

image:"images/show-more.png",
top:7,
height:7,
width:'auto'

});

viewMore.add(labelMore);
viewMore.add(imageMore);

Comments

  1. Stephen Tramer 2011-04-15

    Need more context. Is this occuring in a split view, or on iPad in general?

  2. ctredway 2011-04-15

    Just in a regular view on the ipad. I have not tried it in a popover as the customer reported it as a regular view.

  3. Stephen Tramer 2011-04-15

    Thanks for the information - I'll begin work on a fix.

  4. Stephen Tramer 2011-04-15

    I need more information. The width of the view is specified as 50, and the label is placed at 50 right (meaning that it's aligned to the far-right of the view). Horizontal layout specifies that anything will be positioned to the right of whatever element is added. This means that the label/image may be overlapping, or that the image may not be drawn at all.

    I need to know exactly what the user is seeing and what they expect the result to be. This is likely not a bug but an improper use of layout constraints.

  5. Blain Hamon 2011-04-15

    What is the Correct Manner, anyways?

    In viewMore, we're given height:20 and width:150. Top and Right affect viewMore's placement within its parent, but for placements within viewMore, they're not important. We also have layout of 'horizontal', which is akin to packing as if text (left to right, then top to bottom). To make room for the following subviews, all subviews will only be their minimum size required to place it.

    labelMore is a label, it has text, color, font, and text alignment. None of these affect labelMore's placement in and of themselves, only of the text's placement within labelMore. Since neither height or width are set to 'auto', these can be ignored for the purposes of layout.

    labelMore has height:20 and right:50. The required vertical space for layout is 20, due to height. No width is requested, so the required horizontal space for the layout will be 50 of padding (blank space) on the right, with the left 0 pixels containing the actual text.

    imageMore has an image. Since width is auto, the image's width is used and is the required vertical layout. The required vertical space for the layout is top:7 + height:7 = 14.

       
       ++------------+---------+-------------------------+
       ||            |7 pixels space                     |
       ||            +---------+                         |
       ||<50 pixels >|**IMAGE**|< Where next subview     |
       || of empty   +---------+   will start            |
       || space      |< The remaining 100 pixels        >|
       ++------------+---------+-------------------------+
       ^^
       ||
       0 pixels wide
       

    Since the label itself has a width of 0, no text will be visible. The lines are there just for visualization, but won't actually show up. This is the correct manner that the components will be laid out, according to the spec.

    I'm guessing he wants the layout to be a bit different. Can he provide a screenshot or description of the layout so we can provide the proper javascript for him to put in?

  6. Nolan Wright 2011-04-15

    it seems like it should be this (plus he needs a width:'auto' on the label):

              main view          50 from right
       

    +-----------150px-----------+<----50px----> - <--50px-->

    - [label][image]

    +----------------------------+-------------+

    and the image is 7 from the top.

  7. Thomas Huelbert 2011-04-15

    back to open

  8. hal 2011-04-15

    As the OP has set the container view (viewMore) to horizontal layout, presumably he simply wants all elements laid out horizontally. However, as Blain said, the right property on labelMore and top property on imageMore is preventing this.

    If he wants absolute positioning of the horizontally-laid out elements inside viewMore he needs to create a view inside it.

    I think he needs to use a series of sub views, so that he can combine the absolute/relative and horizontal/vertical layouts to reach his objective. For example:

       var viewMore = Ti.UI.createView({
           height:20,
           width:150,
           top: 90,
           right: 50
       });
       
       var subviewMore = Ti.UI.createView({
           layout:'horizontal',
           right: 50,
           top:7
       });
       
       var labelMore = Titanium.UI.createLabel({
           text:"Show More",
           font:{fontSize:12,fontWeight:'bold'},
           textAlign:'right', // this is superfluous with a width being set
           color:'#517ca5',
           height:20
       });
       
       var imageMore = Titanium.UI.createImageView({
           image:"images/show-more.png",
           height:7,
           width:'auto' // this is superfluous, as it is the default
       });
       
       win.add(viewMore);
       viewMore.add(subviewMore);
       subviewMore.add(labelMore);
       subviewMore.add(imageMore);
       

    I suspect that this ticket should be marked as invalid.

  9. Blain Hamon 2011-04-15

    The constraint-based layout needs better docs. Auto is never the default, because auto is very expensive. Either way, this ticket should indeed be marked as invalid

  10. Lee Morris 2017-03-02 Closed as invalid.

JSON Source