margin not respected

[kevinresol]

package;

import haxe.ui.*;
import haxe.ui.core.*;
import haxe.ui.components.*;
import haxe.ui.containers.*;

class Main extends hxd.App {
	
	static function main() {
		new Main();
	}
	
	override function init() {
		hxd.Res.initEmbed();
		Toolkit.init({app: this});
		var root = new VBox();
		Screen.instance.addComponent(root);
		
		var window = hxd.Window.getInstance();
		root.width = window.width;
		root.height = window.height;
		root.customStyle.backgroundColor = 0x37344C;
		
		// demonstrate margin
		var box = new HBox();
		root.addComponent(box);
		box.customStyle.backgroundColor = 0x00ff00;
		box.customStyle.percentWidth = 100;
		for(i in 0...6) {
			var item = new Label();
			box.addComponent(item);
			item.text = 'Label $i';
			item.customStyle.marginLeft = item.customStyle.marginRight = 30;
			item.customStyle.backgroundColor = Std.random(0xffffff);
		}
		
		// demonstrate padding
		var box = new HBox();
		root.addComponent(box);
		box.customStyle.backgroundColor = 0xffff00;
		box.customStyle.percentWidth = 100;
		for(i in 0...6) {
			var item = new Label();
			box.addComponent(item);
			item.text = 'Label $i';
			item.customStyle.paddingLeft = item.customStyle.paddingRight = 30;
			item.customStyle.backgroundColor = Std.random(0xffffff);
		}
		
	}
}

Note that in the first row, only the first item has its marginLeft respected.

[ianharrigan]

Yeah, looks off, so basically, the first row should effectively have a 30px space between each item?

[kevinresol]

yup.

Also, I don't understand why there are margin between the items in the 2nd row, and seems no way to disable it.

[ianharrigan]

ill take a look at the margins one,

as for the second row, there is a spacing style attribute that in the default style is "5px":

http://haxeui.org/builder/?auxkih

[kevinresol]

arr ok, thanks. didn't know about the spacing style