General Calendar Cards Color Date & Time Event Calendar Forms Grid Layout Image Listview Measurement Navigation Number Numpad Option List Page Popup Range Scroller Scrollview Select Timer Timespan Treelist Tools Accessibility



The page component adds basic styling to a container, based on the theme being used, like background and typography. Additionally, if top and / or bottom navigation is also being used, all pages get a top and bottom padding accordingly to accommodate the navigation without overlapping the content.

Pages are required to be the direct descendants of the body element (or the element specified by the context setting).


Auto initialization

To auto-initialize the page elements, simply put the mbsc-page attribute on the container element.

<div id="mypage" mbsc-page>
    <div class="mbsc-padding">
        <h1>Page Title</h1>
        <p>Page content.</p>

The initialization will use the default options. The defaults can be set in the mobiscroll.settings object, after the Mobiscroll scripts are loaded, but before the page load (document ready) event is fired, in order to have effect on the page initialization.

mobiscroll.settings = {
    theme: 'ios',
    lang: 'de'

If the page container is added later to the DOM, e.g. with an Ajax page load, a custom event named mbsc-enhance needs to be triggered in order to initialize the dynamically added content.
When the mbsc-enhance event is triggered on a DOM element, all elements inside with the mbsc-page attribute will be initialized (including itself).

$.get('/mypage', function (responseHtml) {

Manual Initialization

The page can also initialized manually, just like any other Mobiscroll component.

<div id="mypage">
    <div class="mbsc-padding">
        <h1>Page Title</h1>
        <p>Page content.</p>
$(function () {
        theme: 'material'

If the form container is added later to the DOM, e.g. with an Ajax page load, call the initialization right after the content is appended in the DOM.

$.get('/mypage', function (responseHtml) {
        theme: 'material'

Typescript Types

When using with typescript, the following types are available for the Page:

Type Description
Page Type of the Page instance
MbscPageOptions Type of the settings object that is used to initialize the component


Name Type Default value Description
context String or HTMLElement 'body' Context in which mobiscroll is appended and positioned (if not inline). Can be a selector string or a DOM element.
theme String undefined Sets the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform. If the theme for the specific platform is not present, it will revert to the Mobiscroll theme.

Supplied themes:
  • 'ios' - new iOS 7, 8, 9 theme
  • 'material' - Material theme (Android 5.x)
  • 'material-dark' - Material dark theme (Android 5.x)
  • 'mobiscroll' - Mobiscroll theme
  • 'mobiscroll-dark' - Mobiscroll Dark theme
  • 'windows' - Windows theme
  • 'windows-dark' - Windows theme (dark version)
It's possible to modify theme colors or create custom themes.
Make sure that the theme you set is included in the downloaded package.


Name Description
onInit(event, inst) Triggered when the component is initialized.


  • event: Object - The event object.
  • inst: Object - The instance object of the page.


    onInit: function (event, inst) {


Name Description
getInst() Returns the object instance.

Returns: Object

  • The object instance.


Methods can be called on an instance. For more details see calling methods
// With selector

// With instance
option(options) Sets one or more options for the component.


  • options: Object - A map of option-value pairs to set.


Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('option', {
    display: 'bottom',
    lang: 'de'

// With instancee
    display: 'bottom',
    lang: 'de'
tap(el, handler) Attaches the handler function to the tap event of element el.


  • el: Object - The element with tap event.
  • handler: Function - If the action was initiated with touch event, handler is called on touchend, otherwise on click.


Methods can be called on an instance. For more details see calling methods
// With selector
$('#mobiscroll').mobiscroll('tap', $('#element'), function () { alert("It's a tap!"); });

// With instance
mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });


Name Type Default value Description
lang String 'en-US' Language of the component. Based on the language string the component loads the language based default settings from the language modules.
Supported languages:
  • Arabic: 'ar'
  • Bulgarian: 'bg'
  • Catalan: 'ca'
  • Czech: 'cs'
  • Chinese: 'zh'
  • Croatian: 'hr'
  • Danish: 'da'
  • Dutch: 'nl'
  • English: 'en' or 'en-US' or undefined
  • English (UK): 'en-UK' or 'en-GB'
  • Farsi: 'fa'
  • German: 'de'
  • Greek: 'el'
  • Spanish: 'es'
  • Finnish: 'fi'
  • French: 'fr'
  • Hebrew: 'he'
  • Hindi: 'hi'
  • Croatian: 'hr'
  • Hungarian: 'hu'
  • Italian: 'it'
  • Japanese: 'ja'
  • Korean: 'ko'
  • Lithuanian: 'lt'
  • Norwegian: 'no'
  • Polish: 'pl'
  • Portuguese (Brazilian): 'pt-BR'
  • Portuguese (European): 'pt-PT'
  • Romanian: 'ro'
  • Russian: 'ru'
  • Russian (UA): 'ru-UA'
  • Slovak: 'sk'
  • Serbian: 'sr'
  • Thai: 'th'
  • Swedish: 'sv'
  • Turkish: 'tr'
  • Ukrainian: 'ua'
  • Vietnamese: 'vi'
rtl Boolean false Right to left display.


Typography variations can be used to text styling.

<p class="mbsc-ultra-bold">This is a paragraph with ultra-bold font-weight </p>
<p class="mbsc-bold">This is a paragraph with bold font-weight </p>
<p class="mbsc-medium">This is a paragraph with medium font-weight </p>
<p class="mbsc-light">This is a paragraph with light font-weight </p>
<p class="mbsc-thin">This is a paragraph with thin font-weight </p>
<p class="mbsc-italic">This is a paragraph with italic font-style </p>
<div class="mbsc-padding">This is a section with padding </div>
Left align
<p class="mbsc-align-left">This is a paragraph with text aligned left </p>
Right align
<p class="mbsc-align-right">This is a paragraph with text aligned right </p>
Center align
<p class="mbsc-align-center">This is a paragraph with centered text </p>
Float Left
<p class="mbsc-pull-left">This is a paragraph with text pulled left </p>
Float Right
<p class="mbsc-pull-right">This is a paragraph with text pulled right </p>

Empty view

In case if you have an empty content or you have no item in your list, you can illustrate that with an element which has the .mbsc-empty class. You can add a title and a description for it.

Empty view styling
<div class="mbsc-empty">
    <h3>No memories</h3>
    <p>Memories will appear here when more photos and videos are added to the library</p>


Provide inline feedback messages for typical user actions. The notes include several predefined colors, each serving its own semantic purpose.

For proper styling, use one of the eight required contextual classes (e.g. .mbsc-note-warning).

Predefined note styles
<div class="mbsc-note mbsc-note-primary">This is a primary note!</div>
<div class="mbsc-note mbsc-note-secondary ">This is a secondary note!</div>
<div class="mbsc-note mbsc-note-success ">This is a success note!</div>
<div class="mbsc-note mbsc-note-danger ">This is a danger note!</div>
<div class="mbsc-note mbsc-note-warning ">This is a warning note!</div>
<div class="mbsc-note mbsc-note-info ">This is a info  note!</div>
<div class="mbsc-note mbsc-note-light ">This is a light note!</div>
<div class="mbsc-note mbsc-note-dark ">This is a dark note!</div>

Images & Videos

Optimize your images and videos with the predefined classes.

Avatar images can be applied with the mbsc-avatar class.

Avatar image example
<img class="mbsc-avatar" src="image.png">

Thumbnail images can be applied with the mbsc-thumbnail class.

Thumbnail image example
<img class="mbsc-img-thumbnail" src="image.png">

Full width images and videos can be applied with the mbsc-fluid class

Full width image example
<img class="mbsc-media-fluid" src="picture.png">