Style Variance Across Clients
Some MobileTogether solutions might look different across operating systems (platforms) because each operating system handles a few styling properties differently. (The different platforms on which MobileTogether solutions run are: Android, iOS, Windows, and Web.)
This topic:
•explains how you can create a uniform look across platforms, and
•lists the style properties that are handled differently by specific platforms.
Create a uniform look across platforms
The most effective way to set a uniform look is to identify style properties that are handled differently across platforms and then set the value of each such property via an XPath expression that sets different values for different platforms. You can build conditional branches in the XPath expression by using the static global variables that hold the platform information.
For example, the following XPath expression can be set on the Padding style property of project components:
if ($MT_Android=true()) then "0dp" else "1dp"
The XPath expression above sets one padding value for Android devices and another for all other platforms.
You can set these style property definitions at one or more of the following locations:
•Via the design layout: On individual controls; on the page; in the project settings
•Via style sheets: On all controls together; on a specific control type; on the tables of a page; on a page
In the project's properties settings, you can set UI Compatibility Mode to true to set default values of properties to be the same across platforms.
Platform-specific handling of particular styles
Given below is a list of style properties that are handled in a noticeably different way by at least one platform.
General
The default colors, fonts, and sizes vary across platforms and also across different devices on a single platform, Additionally, controls look different across devices and across different versions of a single operating system.
Margins of top-level controls
Top-level controls are controls that are located directly within the page container. Put another way, these are controls that are not inside a table. Android devices set a default margin of 9px for all top-level controls (although the Label control has a bottom margin of 0px). Other platforms have other defaults. You can use the Top-Level Margins property of the More Project Settings dialog to set the margins of top-level controls uniformly across all platforms.
Label controls
On Android, the Label control has a default margin of 9px on all sides except the bottom, which has a margin of 0px.
Padding
•On Windows, all controls (except the Label control) have a "natural padding" of 1px. This is overridden when you set padding on a control (for example, 0px).
•On iOS, a standard table padding is applied: 9px on right and left, and 5px on top and bottom. If values are set for any Padding property of individual tables, then that Padding value (top, right, bottom, or left) is added to the respective iOS table padding value. If you wish to remove the standard iOS table padding, set the iOS Table Padding property value (in a project's More Project Settings dialog) to false.
Buttons
•Android buttons have a “natural padding”—even if 0px is specified.
•iOS buttons have no background fill. Instead, they have a "tint color".
•Windows dark theme buttons are transparent.
Back Button
On iOS, there is no device-supplied Back button that is always available. You will need to explicitly add an option (button or an alternative) that enables iOS users to exit the solution.
Combo Box controls
On iOS, multiline combo boxes are not supported.
Switch controls
On iOS, Switch controls have no text.
DateTime controls
The DateTime control is available on iOS only.
Rich Text controls
On Windows clients, the Rich Text control can be edited on a PC (in a web client), but cannot be edited on Windows Phone.
Browser Max Width, Browser CSS Class
These page properties apply to Web browser display only.
Project's Browser settings
The project's browser settings apply to Web browser display only.