We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Mobile styles

Hello,
In your demos the widgets styles are changing according to the underlying OS (looks different on IOS , Android and windows)
How can I make the controls to have a standard look and feel in each one of the platforms.
I want my users that are using different mobile devices to see the exact same widget styles

Thx
Sagi

3 Replies

SN Sasikala Nagarajan Syncfusion Team January 12, 2016 12:56 PM UTC

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>
    </div>



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 data-ej-android="true">

   </head>
    <body>

    <!--Mobile controls-->

    </body>
</html>



Now the whole application will renders in Android style in all the Mobile devices.


Please check with the given solution and let us know if it is helps.

If we misunderstood your query please provide more information about your requirement.  Also update us whether you are using ej-mobile components or web platform components in your application, so that we can provide better solution for your requirement.

Regards,

Sasikala Nagarajan


SK Sagi Karni January 12, 2016 01:09 PM UTC

yes ,
this is what I was looking for.
Do I need to replace http://cdn.syncfusion.com/13.2.0.29/js/mobile/ej.mobile.all.min.css
If I want to render a specific platform I do not want the entire css's of all paltforms
Thx
Sagi


DR Dhinesh Ravi Syncfusion Team January 13, 2016 09:25 AM UTC

Hi Sagi,

Thanks for the update.

You can use ej.mobile.ios-core.min.css instead of ej.mobile.all.min.css, to render the controls in IOS style. And also you need use ej.mobile.ios-light.min.css for light theme or ej.mobile.ios-dark.min.css for dark theme.

Hence we suggest you use ej.mobile.ios-light.min.css/ ej.mobile.ios-dark.min.css with ej.mobile.ios-core.min.css to render the entire application in light/dark theme. Refer to the following code example

[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-->
   <link rel="stylesheet" rel='nofollow' href="http://cdn.syncfusion.com/13.1.0.21/js/mobile/ej.mobile.ios7-dark.min.css" />

</head>
<body>
  <!--Mobile controls-->

</body>
</html>


Note: Please make sure the below changes in your application

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>
  <!--Mobile controls-->

</body>
</html>





Regards,
Dhinesh R

Loader.
Live Chat Icon For mobile
Up arrow icon