Hi Sagi,
Thank you for contacting Syncfusion Support.
To achieve the native look and feel, our mobile controls gets rendered with native style of the Mobile device. To make the control render with specific mode we can use data-ej-rendermode property, which renders the control as per user specification in all the Mobile devices. (i.e.) if the user specifies rendermode as “android”, our controls renders in Android style even in Windows or IOS devices. Refer to the following code example.
[Html] <div data-role="ejmlistview" id="defaultlistbox" data-ej-rendermode="android" data-ej-allowscrolling="true"> <ul> <li data-ej-text="Artwork"></li> <li data-ej-text="Abstract"></li> <li data-ej-text="2 Acrylic Mediums"></li> </ul> |
The above code example will renders the ListView in Android Style, even in IOS and Windows. RenderMode property is specific to the Mobile controls.
To render the whole application in a particular style (i.e.) Android style in Windows or IOS device, we can use the property data-ej-android=true in the head tag. Refer to the following code example.
[Html] <html> </head> </body> |
[html] <html> <head data-ej-ios7="true" > <link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/13.1.0.21/js/mobile/ej.mobile.ios7-core.min.css" /> <!--For light theme--> <link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/13.1.0.21/js/mobile/ej.mobile.ios7-light.min.css" /> <!--For Dark theme--> </head> </body> |
1. The data-ej-ios7=true attribute must be included in head tag.
2. If you prefer dark theme, you need to include data-ej-theme=”dark” attribute in head tag. Refer to the following code example
[html] <html> <head data-ej-ios7="true" data-ej-theme="dark"> </head> </body> |