Please document the units for width/height etc. (in particular define what % is about but also cm, em, etc.)

[mike-ense]

Trying "width: 20%" on a button gives me a 0.4cm wide element. Looking in the documentation for what units exist e.g. px, cm, em, % and what that % relates to - like a box model or something - I don't find that.

Could you please document this?

Thanks!

[vakrilov]

Currently(version 1.5) width and height can be specified only in device Independent pixels(DIP). It is the default and not unit is required. "20%" is most likely parsed as 20 dips - the width you are getting.
You can take a look at this issue about percentage based width and height it is currently in development and will be available soon.

[mike-ense]

@vakrilov thanks for clarifying - and this issue https://github.com/NativeScript/docs/issues/210 asks for a clarification about what these DIP:s mean also.

Does this mean that in {N}, forever, as long as no unit will be used, DIP will be what's meant?

And all the hardcoded JS values like ".width", ".marginTop" etc. are counted in DIP:s?

Please tell me the definition and how it plays out on Android, iOS and Windows Phone.

https://en.wikipedia.org/wiki/Device_independent_pixel says the definition actually is 0.15875 mm at least on Android, i.e. not has anything to do with pixels.

Please clarify?

This is extremely important for making a layout consistent, so I really need to know, thanks :D

[hshristov]

Hi @mike-ense
There is very good article explaining device density and device independent pixels here:
http://developer.android.com/guide/practices/screens_support.html

In short - all our layout properties (like width, height, margins, paddings, etc.) are in device independent pixels. Converting it to device pixels is done by multiplying device independent pixels and screen density. So it is not really fixed like 0.15875mm or something.
On iOS density is one so there one DIP is equal to one device pixel.

[mike-ense]

@hshristov , aha.

So on iOS, 1 DIP = 1 actual pixel on the display,

and on Android, 1 DIP = 1 DIP, but there they indeed define it as 0.15875mm no?

[vakrilov]

@mike-ense
Not exactly. In IOS there are 3 different desities depending on the device:

• 1 (for non-retina device) - 1DIP = 1 device pixel
• 2 (for retina) - 1DIP = 2 device pixels
• 3 (iPhone 6 Plus) - 1DIP = 3 device pixels
  Here is a detailed explanation.
  The idea of DIPs is that they are roughly the same physical size on all devices. So if you set the width of an Image to be 160 - it will be ~inch(2.54cm) wide on all devices.

[mike-ense]

@vakrilov , aha re iOS I understand.

But on Android, should it be 0.15875mm?

I think on my phone it looks like 2-2.5mm or so

[vakrilov]

There is a pretty good explanation of density-independent pixels in the article that @hshristov posted:
http://developer.android.com/guide/practices/screens_support.html#terms
The size may not be exactly 0.15875mm as some android devices return a rounded value of the density to ease calculations and avoid rounding errors.

[mike-ense]

@vakrilov , so you mean on Android it's going to be somewhere approx in the 0.15-0.16mm range anyhow? Fair enough. :)

[tjvantoll]

Just as an update, there is an explanation of percentages now up at https://docs.nativescript.org/ui/layouts#percentage-support. For the DPI discussion I’m going to close this issue in favor of https://github.com/NativeScript/docs/issues/210.

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.