[TIMOB-1437] Horizontal Layout broken on iPad

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

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.

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

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.

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?

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.

back to open

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.

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