Things like 

  • setting a theme
  • display mode
  • language 

are essential for getting the look & feel right. These settings cut across most controls, so it is something that you can do for every Mobiscroll component. Learn how to use the global settings.

1. Setting the theme

Controlled by the theme property, you can keep the default "Mobiscroll theme” or go with a platform specific theme for iOS, Android and Windows Phone.

Specify a single theme or rely on the auto-theme feature which will set it based on the platform the page is viewed on.

You'll find more information about the theme setting in the API docs.

TIP: If you are looking for more customization, read about how you can change the colors with the theme builder.

JS

theme: 'ios'

2. Setting the display mode

Five different display modes are available: 

  • bottom
  • top
  • center
  • bubble
  • inline

The first four are modals showing up either at the top or bottom of the screen, right in the center or anchored to the input for the bubble mode (this is especially useful on large screens).

Inline mode is for embedding the control into any markup. Let’s say you don’t want to open a modal for selecting a date and just have it on your page, you can use display: ‘inline’ for that.

TIP: Try this demo with all display modes.

JS

display: 'bottom'

3. Setting the language

Mobiscroll ships with translations. Language files include microcopy, localization settings like date formats, time formats, right-to-left settings...

Set the preferred language with the lang setting.

JS

lang: 'de'

TIP: See if your language is supported on the demo page or add your own translation.

What's next?

Did this answer your question?