[TIMOB-19900] iOS Layout: Views wrap while their total width % equals 100

GitHub Issue	n/a
Type	Bug
Priority	Medium
Status	Closed
Resolution	Duplicate
Resolution Date	2018-07-20T21:05:19.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	iOS
Labels	layout
Reporter	Fokke Zandbergen
Assignee	Unknown
Created	2015-11-10T09:52:01.000+0000
Updated	2018-08-06T17:41:07.000+0000

Description

The following sample and attached screenshots show that while 4 * 25% = 5 * 20% = 100% the last view is wrapped on iOS. On Android it works as expected. Enabling auto-layout doen't affect the issue. *Example*

<Alloy>
	<Window layout="vertical" backgroundColor="white">
		<View layout="horizontal" height="Ti.UI.SIZE">
			<View width="25%" height="100" backgroundColor="red" />
			<View width="25%" height="100" backgroundColor="green" />
			<View width="25%" height="100" backgroundColor="red" />
			<View width="25%" height="100" backgroundColor="green" />
		</View>
		<View layout="horizontal" height="Ti.UI.SIZE">
			<View width="20%" height="100" backgroundColor="red" />
			<View width="20%" height="100" backgroundColor="green" />
			<View width="20%" height="100" backgroundColor="red" />
			<View width="20%" height="100" backgroundColor="green" />
			<View width="20%" height="100" backgroundColor="red" />
		</View>
	</Window>
</Alloy>

Attachments

File	Date	Size
android_20151110-104500.png	2015-11-10T09:53:03.000+0000	33478
Simulator Screen Shot 10 Nov 2015 10.40.02.png	2015-11-10T09:52:58.000+0000	16074

Comments

Fokke Zandbergen 2015-11-10

Also reported on Stack Overflow: http://stackoverflow.com/q/33613680/4626813
Fokke Zandbergen 2015-12-10

Might be also happening on Android in certain scenarios: http://stackoverflow.com/questions/34001540/openglrenderer-path-too-large-to-be-rendered-into-a-texture-in-titanium

Joshua Quick 2017-08-15

I've confirmed that this is horizontal layout bug on iOS. It happens when the percentages of each view in the row add up to 100%. (We're likely missing a floating point epsilon comparison check in our code.) Here is the code I ran...

   var window = Ti.UI.createWindow(
   {
   	layout: "vertical",
   	backgroundColor: "black",
   	fullscreen: true,
   });
   
   containerView = Ti.UI.createView(
   {
   	layout: "horizontal",
   	backgroundColor: "red",
   	width: Ti.UI.SIZE,
   	height: Ti.UI.SIZE,
   });
   containerView.add(Ti.UI.createLabel(
   {
   	text: "Left (50%)",
   	textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
   	color: "black",
   	backgroundColor: "orange",
   	width: "50%",
   }));
   containerView.add(Ti.UI.createLabel(
   {
   	text: "Right (50%)",
   	textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
   	color: "black",
   	backgroundColor: "lime",
   	width: "50%",
   }));
   window.add(containerView);
   window.add(Ti.UI.createView({ height: "1%" }));
   
   containerView = Ti.UI.createView(
   {
   	layout: "horizontal",
   	backgroundColor: "red",
   	width: Ti.UI.SIZE,
   	height: Ti.UI.SIZE,
   });
   containerView.add(Ti.UI.createLabel(
   {
   	text: "Left (50%)",
   	textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
   	color: "black",
   	backgroundColor: "green",
   	width: "50%",
   }));
   containerView.add(Ti.UI.createLabel(
   {
   	text: "Right (Filled)",
   	textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
   	color: "black",
   	backgroundColor: "orange",
   	width: Ti.UI.FILL,
   }));
   window.add(containerView);
   
   window.open();

*Work-Around:* Set up the last view in the row to use a Ti.UI.FILL width. *Note:* This particular bug is not an issue on Android. (Android has different horizontal layout bugs not related to this particular issue.)

Hans Knöchel 2018-07-20

Fixed as part of TIMOB-26211
Eric Merriman 2018-08-06

Closing as a duplicate. If this is in error, please reopen.

JSON Source