Implementing Material Design Input Fields with Dynamic Labels in Mendix
0
Hello Mendix Community, I'm facing a challenge with the UI design implementation in my Mendix application and would appreciate any expertise you can offer. I am trying to implement Material Design input fields where the label serves as a placeholder within the input field and moves upwards when the user clicks on the field (similar to this CodePen example: codepen.io/chris__sev/pen/LYOyjY). The challenge is that in Mendix, the label is by default rendered above the input field, whereas for this effect, the label needs to be below the input field. I've written some JavaScript that adjusts the HTML structure upon page load so that the label is always directly under the input field. However, this approach has several issues. Firstly, I can't incorporate this script into the index file, as it seems that only the content is reloaded on a new page load, not the index.html itself. Similar problems arise when I try to include it in the layout, meaning I currently have to implement it manually on each page. Additionally, this method does not work with Conditional Visibility because the element does not exist at page load but only appears once the conditions are met. This is making the implementation of this feature increasingly cumbersome. Is there a way to sensibly implement this label behavior in Mendix? For instance, can I adjust files in the Mendix project so that labels are rendered below input fields by default? Or does anyone have another practical idea on how to solve this problem? Thank you in advance for your support and ideas! Best regards, Alex