Buttons styles are inconsistent

Form components
1

I’m finding that the button styles of mobiscroll are not being applied consistently across platforms even though I use theme: ‘auto’ for my global settings and I don’t override it anywhere.

Having set theme to ‘auto’ I would expect windows styling on Windows devices, iOS styling on iOS devices and Android styling on Android devices. That’s not what’s happening though. Although you don’t seem to have an Android style button in your demos (https://demo.mobiscroll.com/jquery/buttons/basic#theme=material) You have something called Material, which I sometimes see on my Android device, but not always.

On all platforms (Windows, Android and iOS) I’m getting the Mobiscroll theme buttons throughout my system wherever I place a control with a few exceptions. For example using the following HTML:
<button mbsc-button class='mbsc-ic mbsc-ic-plus mbsc-btn'>Terminate Employment</button>"

mobiscroll%20theme%20buttons

On the login page they’re not all the same but I still don’t get what I would expect on Windows and Android. I get the Mobiscroll themed buttons on my Windows device and I get Material themed buttons on my Android device. Only on the iOS device do I actually get appropriately themed buttons.

The login button uses the following HTML:
<button mbsc-button class="mbsc-btn-block md-signup-btn" onclick='login()'>Sign in</button>

On popups I get Android style buttons on both my Android device and on Windows. Only on my iOS device do I get the appropriately styled iOS buttons. So for popups it seems only Windows is a problem.

So to summarize, these are the problems I’m having:

  1. Inline button elements always take Mobiscroll theme, regardless of platform.
  2. On popups, Windows uses the Android theme.
  3. The login page uses Mobiscroll theme on both Windows and Android.

What am I doing wrong?

2

Hi Vincent,

Currently we only default to the Windows theme on Windows phone devices, on desktop the default will be the Mobiscroll theme.

On Android we default to the Material theme. What do you mean by “Android style buttons”? Android also follows the Material theme specification by Google.

I created a small test with a single button, but it works as expected:

Windows and other desktop OS -> Mobiscroll theme
Windows phone (e.g. Microsoft Lumia) -> Windows theme
iOS, iPad OS -> iOS theme
Android -> Material theme

Example:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Button</title>

    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

    <link rel="stylesheet" href="css/mobiscroll.jquery.min.css">
    <script src="js/mobiscroll.jquery.min.js"></script>

</head>

<body>

    <div mbsc-page>
        <button mbsc-button data-icon="plus">Terminate Employment</button>
    </div>

    <script>
        mobiscroll.settings = {
            theme: 'auto'
        };
    </script>

</body>

</html>