Add Margin and Padding to Titanium UI Views like CSS BoxModel

Have you ever tried to add padding to your Ti.UI.Label to add some space between it and the view it’s nested in. In the web development world it’s easy to position your content exactly where you need it by using various CSS box model settings. The two I use the most are margin and padding. Titanium Mobile doesn’t have these settings. My guess is the native SDKs don’t support these types of settings. So what can you do?

CSS Box Model Layout

CSS Box Model Layout from W3Schools.com

There are two solutions I use to add margin and padding to Ti.UI.Views like labels and images. The first one is the obvious solution which I used in many of my apps. Simple nest your content view in a parent view and set the top, left, right and bottom settings for margins. I set height and width of the parent view to Ti.UI.SIZE to keep it wrapped tight around the content view. Last I add a background color to the content view to show content margin.

var container = Ti.UI.createView({
    	height : Ti.UI.SIZE,
    	width  : Ti.UI.SIZE
    }),
    content = Ti.UI.createLabel({
    	top    : 10,
    	right  : 10,
    	bottom : 10,
    	left   : 10,
    	color  : "#000000",
    	height : 100,
    	text   : "Integer in dolor quis risus accumsan porta sit amet a ipsum.",
    	backgroundColor : "#87FC70"
    });

container.add(content);

Now what about padding? In the CSS box model the margin is used to add spacing outside the box and padding is used to add spacing inside the box border. The quick solution would be to use the border settings for the content view. Set the borderWidth to the padding you want and make the borderColor transparent. This doesn’t always work as expected and what if I actually need to use a border. My early versions of this pattern used this hack but I had to move away from it and create an inner view to wrap my content.

So create a new view and copy over the top, right, bottom and left settings to move the margin to the inner view. Now those settings in the content view serve as the padding and you can add a border setting to the inner view to complete the box model.

var container = Ti.UI.createView({
    	height : Ti.UI.SIZE,
    	width  : Ti.UI.SIZE
    }),
    inner = Ti.UI.createView({
    	top    : 10,
    	right  : 10,
    	bottom : 10,
    	left   : 10,
    	height : 100,
    	backgroundColor : "#87FC70"
    }),
    content = Ti.UI.createLabel({
    	top    : 10,
    	right  : 10,
    	bottom : 10,
    	left   : 10,
    	color  : "#000000",
    	text   : "Integer in dolor quis risus accumsan porta sit amet a ipsum."
    });

container.add(content);
iOS Box Model Example

Padding and margin with background colors

Box Model Example

Label view with padding and margin

There it is… the box model in Titanium mobile. You can add borders to the inner view to make sure padding is behind the border. This will work on both iOS and Android apps. I’m curious if anyone has any other solution for margins and padding. Please let me know.

It does get annoying to add all this code each time you need margin and padding for your views. So to make things much easier I created a module called BoxModel to neatly package this up for you to reuse at your hearts content.

Download or clone the code here from GitHub.

This entry was posted in Code, Quick Tip and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>