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
asked
1 answers
0

Hi Alex,

If you really want to achieve the result as in the codepen you shared, it does require quite some custom code, but I think this result should be possible with custom CSS only.

 

What you mention about showing the label below the input field is something you can do with some simpler CSS. You can either choose to apply this to all inputs in your application, or give all input fields where you want this functionality a custom class. 

I would advise using the second option with a custom class as this gives you more flexibility on which input fields you do want to apply this custom styling to. (You could also create a custom buildingblock of an text-input widget where this class is automatically applied)

 

For example:

image.pngYour text input is actually a container with 2 element in it:  the label & the input

Currently in the orange highlighted section you can see it has a

flex-direction: column;

If you would change that to 

flex-direction: column-reverse;

It's already going to reverse the order of the elements inside of this flex container, which will make the label position below the input field as seen in the next screenshot:

image.png

As you can see with my current example your are changing all the input fields, which I can assume is not what you want, therefore I would suggest adding a custom class to your text inputs, on which you apply this styling, if you are going to use this approach you might have to use something like:

 

.yourCSSclass {
     flex-direction: column-reverse;
}

or 

.yourCSSclass {
     flex-direction: column-reverse !important;
}

This is however the most basic solution of changing the order of your input, if you do want to do it for all text inputs in your application you could use:

.mx-textbox {
   flex-direction: column-reverse;
}

(do note that this will only work for vertical oriented views)

 

The codepen you shared has quite some usefull CSS that you can reuse if you would really want to make a copy of the codepen component. However I think for your solution you do not need the label to be underneath the input field, but inside of the input field (which is also possible with CSS)

Using CSS will by default eliminate your issue with custom javascript and conditional visibility, as hidden content will still get the same styling.

 

Hopefully this helps!

answered