Form fields from inputs, text areas to segmented controls & switches can be used in creating varied forms for event creation, edit and much more. Build custom forms for mobile, desktop with the responsive grid layout or render them in popups & modals for add/edit screens.
Use the grid layout to create single and multiple column forms suited for medium and large screens. Don't go overboard with too many columns but make use of the available horizontal space on bigger screens.
Use the global settings for setting the theme, localization options and everything that should be consistent across your app.
When working with the event calendar you will usually want to show an add/edit from in a popup rather than render it directly into the page markup. Simply configure the popup and add your form fields to it.
Use the alert, confirm and prompt messages to pop a message box in the middle of the screen. Alert the user or collect feedback at the same time. These controls cannot be dismissed by pressing the overlay, which avoids closing it by mistake.
Use toast and snackbars to post updates to the users without interrupting them. These notifications can be top/bottom positioned and come in different colors.
Use the segmented control to render multiple-choice lists with single or multiple select. Use it as tabs, as a compact multi-choice UI instead of a checklist and even as an alterantive to a radio buttons or a select.
Break the monotony of event add/edit forms by mixing it in with other inline fields.
Use presets with pre-defined colors on top of the theme colors. Every theme ships with eight customizable presets that can be used across various components including buttons, segmented and steppers:
While Mobiscroll doesn’t provide built-in validation, it provides styling for error messages, disabled fields, labels and more. See how the fields look in different themes by changing it dynamically from the floating action bar on the right.
The three input styles: underline, box and outline can be combined with three label styles: stacked, inline or floating. Try different combinations to find what's right for you.
Forms can be themed and customized. There are four levels of customization:
Base themes: Choose between iOS, Material and Windows.
Light or dark: Every theme has a light and dark variant. Setting the themeVariant to 'auto' will switch based on system settings.
Custom themes: Use the theme builder to customize the colors and make it match your brand.
Custom Sass and CSS: If you need further customization, the sky is the limit with Sass and CSS overrides.
You can also see how the other demos look by changing the theme in the floating action bar on the right side (not this example, the themes are hardcoded here).
Looking for something you didn't see or have a sales question? Ask us about it, we're here to help.
Simple two minute install guide for jQuery and jQuery Mobile
Step 1.
Copy resources
Step 2.
Add references
Step 3.
Copy the code
Step 4.
Refresh browser
Copy the downloaded JS and CSS folder into your project
Extract the downloaded zip (download again) and grab the two folders. Make sure to place it where it can be reached from your html file.
Or you can just simply try and play with the examples right from the folder you just unpacked.
You don't find the downloaded example? Download it again.
Include the mobiscroll CSS and JS resources in your files
Add this script before the closing </head> tag of your file. Make sure to have jQuery loaded before this.
Copy the downloaded JS and CSS folders into your project
Extract the downloaded zip (download again) and grab the two folders. Make sure to place it where it can be reached from your html file.
Or you can just simply try and play with the examples right from the folder you just unpacked.
You don't find the downloaded example? Download it again.
Include the mobiscroll CSS and JS resources in your files
Add this script before the closing </head> tag of your file
If you're working from behind a proxy, additional configuration might be needed.
Please check the proxy configuration options in the documentation.
Copy the code into your app
Grab the relevant parts and drop them into your Component and Template files. Copy the necessary imports into the Module file of your component. For quick testing copy the css to into your project's style.css or style.scss.
If you're working from behind a proxy, additional configuration might be needed.
Please check the proxy configuration options in the documentation.
Copy the code into your app
Grab the relevant parts and drop them into your Component and Template files. Copy the necessary imports into the Module file of your component. For quick testing copy the css to into your project's global.scss file.