The following code does not layout the components in the correct\nmanner.
\nvar viewMore = Ti.UI.createView({
\nheight:20,\nwidth:150,\ntop: 90,\nright: 50,\nlayout:'horizontal'\n\n});
var labelMore = Titanium.UI.createLabel({
\ntext:\"Show More\",\nfont:{fontSize:12,fontWeight:'bold'},\ntextAlign:'right',\ncolor:'#517ca5',\nheight:20,\nright: 50\n\n});
\nvar imageMore = Titanium.UI.createImageView({
\nimage:\"images/show-more.png\",\ntop:7,\nheight:7,\nwidth:'auto'\n\n});
\nviewMore.add(labelMore);
\nviewMore.add(imageMore);
Need more context. Is this occuring in a split view, or on iPad\nin general?
Just in a regular view on the ipad. I have not tried it in a\npopover 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\n50, and the label is placed at 50 right (meaning that it's aligned\nto the far-right of the view). Horizontal layout specifies that\nanything will be positioned to the right of whatever element is\nadded. This means that the label/image may be overlapping, or that\nthe image may not be drawn at all.
\nI need to know exactly what the user is seeing and what they\nexpect the result to be. This is likely not a bug but an improper\nuse of layout constraints.
What is the Correct Manner, anyways?
\nIn viewMore, we're given height:20 and width:150. Top and Right\naffect viewMore's placement within its parent, but for placements\nwithin viewMore, they're not important. We also have layout of\n'horizontal', which is akin to packing as if text (left to right,\nthen top to bottom). To make room for the following subviews, all\nsubviews will only be their minimum size required to place it.
\nlabelMore is a label, it has text, color, font, and text\nalignment. None of these affect labelMore's placement in and of\nthemselves, only of the text's placement within labelMore. Since\nneither height or width are set to 'auto', these can be ignored for\nthe purposes of layout.
\nlabelMore has height:20 and right:50. The required vertical\nspace for layout is 20, due to height. No width is requested, so\nthe required horizontal space for the layout will be 50 of padding\n(blank space) on the right, with the left 0 pixels containing the\nactual text.
\nimageMore has an image. Since width is auto, the image's width\nis used and is the required vertical layout. The required vertical\nspace for the layout is top:7 + height:7 = 14.
\n\n\n++------------+---------+-------------------------+\n|| |7 pixels space |\n|| +---------+ |\n||<50 pixels >|**IMAGE**|< Where next subview |\n|| of empty +---------+ will start |\n|| space |< The remaining 100 pixels >|\n++------------+---------+-------------------------+\n^^\n||\n0 pixels wide\n\nSince the label itself has a width of 0, no text will be\nvisible. The lines are there just for visualization, but won't\nactually show up. This is the correct manner that the components\nwill be laid out, according to the spec.
\nI'm guessing he wants the layout to be a bit different. Can he\nprovide a screenshot or description of the layout so we can provide\nthe proper javascript for him to put in?
it seems like it should be this (plus he needs a width:'auto' on\nthe label):
\n\n main view 50 from right\n\n+-----------150px-----------+<----50px----> -\n<--50px-->
\n+----------------------------+-------------+
\nand the image is 7 from the top.
back to open
As the OP has set the container view (viewMore) to horizontal\nlayout, presumably he simply wants all elements laid out\nhorizontally. However, as Blain said, the right property on\nlabelMore and top property on imageMore is preventing this.
\nIf he wants absolute positioning of the horizontally-laid out\nelements inside viewMore he needs to create a view inside it.
\nI think he needs to use a series of sub views, so that he can\ncombine the absolute/relative and horizontal/vertical layouts to\nreach his objective. For example:
\n\nvar viewMore = Ti.UI.createView({\n height:20,\n width:150,\n top: 90,\n right: 50\n});\n\nvar subviewMore = Ti.UI.createView({\n layout:'horizontal',\n right: 50,\n top:7\n});\n\nvar labelMore = Titanium.UI.createLabel({\n text:\"Show More\",\n font:{fontSize:12,fontWeight:'bold'},\n textAlign:'right', // this is superfluous with a width being set\n color:'#517ca5',\n height:20\n});\n\nvar imageMore = Titanium.UI.createImageView({\n image:\"images/show-more.png\",\n height:7,\n width:'auto' // this is superfluous, as it is the default\n});\n\nwin.add(viewMore);\nviewMore.add(subviewMore);\nsubviewMore.add(labelMore);\nsubviewMore.add(imageMore);\n\nI suspect that this ticket should be marked as invalid.
The constraint-based layout needs better docs. Auto is never the\ndefault, because auto is very expensive. Either way, this ticket\nshould indeed be marked as invalid