mInputs - Material Design Inputs

Content Type: Module
Categories: User Interface

Overview

mInputs will automatically convert your default Mendix inputs into beautiful Google Material Design inputs. You can choose between the Outlined style or the Filled style. This widget is plug & play. No configuration needed. Supports the new Combo Box widget! Also supports now the use of CSS variables!

Just a headsup: this UI module makes use of a small piece of JavaScript within the HTML/JavaScript widget. Please use the Snippet_mInputs_SetBackgroundColor within your layouts when you're opting for the Outlined style.

 

For more goodness and instructions, please read the documentation.

 

Check out my other UI Modules:

 

Connect with me on LinkedIn! https://www.linkedin.com/in/mauritspdekoning/ 

Documentation

https://youtu.be/sfhzuE99d14
Demo urlhttps://mauritsdesignkit-sandbox.mxapps.io/p/inputs

Typical usage scenario

mInputs will automatically convert your default Mendix inputs into beautiful Google Material Design inputs. This widget is plug & play. No configuration needed. Supports marketplace widgets* like the Autocomplete & Multiselect widget.


Go to https://m3.material.io/components/text-fields/overview for more information about input/text fields.


Features and limitations

  • Supports Textbox, Textarea, DateTime pickets, Dropdowns, Reference Selectors and Reference Set Selectors
  • Supports DataGrid, DataGrid2 and Gallery widgets.
  • Supports Login id text box and Password text box authentication widgets.
  • Supports Combo Box Widget.
  • Supports Autocomplete & Multiselect widget. (Soon to be deprecated - will be replaced by the Combo Box widget)
  • Supports outlined & filled style.
  • Supports dynamic backgrounds for outlined style. Please use the Snippet_mInputs_SetBackgroundColor within your layouts.
  • Work even better when you use mMaterial Symbols (Icons). You can download this here: https://marketplace.mendix.com/link/component/205995.
  • Also works better with mFonts. You can download this here: https://marketplace.mendix.com/link/component/206063
  • Added legacy support for browsers that don’t support the :has selector yet (Firefox).
  • No API calls.

Dependencies

  • Mendix 9.24.0. and up.
  • Requires the HTML/Javascript widget when using the Outlined style. https://marketplace.mendix.com/link/component/56
  • Requires _custom-variables.scss for certain variables. The default path has been set within the main.scss. Change this if your _custom-variables.scss is located somewhere else.


Installation

Just download and install this UI Module. Rerun your Mendix Studio Pro application and behold all the new Material Design Inputs! Set the input form orientation to vertical for the best results. While mInputs supports horizontal form orientation, it is still a new unproven feature.

If you're using the Outlined style, please use the Snippet_mInputs_SetBackgroundColor within your layouts.


Configuration

Almost no configuration needed. Please see the Installation part. At default the style will be set to ‘Outlined’. If you would like to change this or changes other values like colors, please go to _m-material-inputs-variables.scss.


Known bugs

  • Some browsers might not support the new :has selector. I’ve added legacy styling for these cases. The input field will look pretty much the same, but with less animation/interaction.
  • Might work not as expected when form orientation is set to Horizontal.
  • Not a bug, but a heads-up: placing data controls in a column header of datagrid2 might look funny when you don't reserve enough space for that column.


Legal notice:

Copyright (c) 2024 Maurits de Koning-Hewitt.

Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:

  • 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
  • 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Releases

Version: 4.5.0
Framework Version: 9.24.0
Release Notes: - Fixed an issue where an user couldn't interact with a disabled text area when choosing filled inputs. - Fixed an issue where the label of a text area would go through the input text in certain cases when choosing filled inputs. - Fixed an Mendix bug causing the radio-buttons to misbehave in terms of width when limited width was available. You can toggle this option in the m-inputs-variables. - Optimised JavaScript code when choosing outlined inputs. - m-inputs-variables has been changed slightly. Be sure to back-up your m-inputs-variables and compare with the new version. - Special thanks to Kevin Geevers for the feedback!
Version: 4.4.1
Framework Version: 9.24.0
Release Notes: - Solved an issue for radio buttons where the text would not display when disabled. This was only an issue for the filled input style. - Added 2 variables:. $m-inputs-filled-radio-disabled-color and $m-inputs-outlined-radio-disabled-color.
Version: 4.4.0
Framework Version: 9.24.0
Release Notes: - Added support for Firefox. Supported from Firefox version 121 and up. - Added configurability for sizing on Data grid 2 Column filters. At default these are a bit smaller than regular inputs. - Added configurability for sizing on Data Grid (old) filters. You can change this if you want it to be more in line with the old Mendix inputs. - Added configurability for icon colors. At default they are set at $font-color-detail. - Changed the styling a bit for Data Control widgets when filled input is selected. Should now be more inline with the rest of the inputs. - Added a fix to the JS file, fixing Data Grid (old) label backgrounds for outlined inputs. - Added a fix for Data Control dropdown height. Should now have the same height as other inputs.
Version: 4.3.0
Framework Version: 9.24.0
Release Notes: - Now supports the new Combo Box widget. Optimized JS code to be much faster, please use this to prevent performance issues when using Outlined style.
Version: 4.2.1
Framework Version: 9.24.0
Release Notes: - Optimized the code due the new introduction of horizontal form orientation support.
Version: 4.2.0
Framework Version: 9.24.0
Release Notes: - Added support for horizontal form orientation in dataviews. Still a work in progress. For stability, please use the vertical form orientation.
Version: 4.1.1
Framework Version: 9.24.0
Release Notes: - Fixed a label height issue on the Date Picker Widget when style was Filled. Thanks Kevin for reporting this!
Version: 4.1.0
Framework Version: 9.24.0
Release Notes: - Optimized the JS. Upgraded UI module to 9.24.0 (LTS) for further development.
Version: 4.0.1
Framework Version: 9.18.0
Release Notes: - Minor fix to the JavaScript due to low performance.