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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Mobile styles

Thread ID:

Created:

Updated:

Platform:

Replies:

121639 Jan 11,2016 08:44 PM UTC Jan 13,2016 09:25 AM UTC JavaScript 3
loading
Tags: ejmTimePicker
Sagi Karni
Asked On January 11, 2016 08:44 PM UTC

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

Sasikala Nagarajan [Syncfusion]
Replied On 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

Sagi Karni
Replied On 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

Dhinesh Ravi [Syncfusion]
Replied On 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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;