Floating Label Textbox possible in Mendix?

5
Hi Community, is it possible to create Google Material like Floating Label Textboxes with Mendix built-in widgets? For those, who don't know what Floating Label Textboxes are: https://www.material-ui.com/#/components/text-field  I've found some sources on how to replicate floating label textboxes with pure html and css, but all rely on the input element having the "required" attribute.  As far as I know, default mendix textboxes don't have that attribute, even if required is set in the modeler.  So has anyone came across this and managed to replicate Floating Label textboxes?  Last resort would be to create a custom widget for it, but I really want to avoid that :) Thanks in advance,  Alex
asked
1 answers
11

done :)   (only works/tested on vertical forms)

Add a class to your input field: floatingLabel
DO NOT fill in a placeholder text, but DO fill in the label of the input field. This label is the text that will float from inut to top of the input.

For our spacings and sizings this is the CSS you need to add in your project:

.floatingLabel input {
	margin-top: 40px;
}
.floatingLabel label,
.floatingLabel.placeholdLabel label {
    font-size: 16px !important;
    position: absolute;
    color: #222B53 !important;
    margin-top: 8px;
    margin-left: 8px;
    transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}
.floatingLabel.floatThyLabel label {
    font-size: 14px !important;
    position: absolute;
    margin-top: -22px;
    margin-left: 0;
    color: #222B53 !important;
    transition: all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

Add an HTML Snippet (Javascript with jQuery) and fill it with this code:

jQuery(document).ready(function($) {
//For each inputfield who needs a different placeholder text [the text that temp. shows up when you focus on the input field] you must make a new function
  $(".floatingLabel input").focusout(function(){  //Scan the page for the targetted input fields to set the correct floating classes
    var inputLength = $(this).val();
    if (inputLength.length > 0) { //If something is in the input field
        console.log('has something');
		// here you add whatever class you want to add to other element
		$(this).parent().removeClass("placeholdLabel"); //Remove the label as placeholder
		$(this).parent().addClass("floatThyLabel"); //Take the label above the input field
		$(this).attr('placeholder', ''); //No placeholder in this inputfield (only when focus and empty)
    } else {
		console.log('has nothing');
	    // here some other action
	    $(this).parent().removeClass("floatThyLabel"); //Remove the label above the input field
	    $(this).parent().addClass("placeholdLabel"); //Set the label as placeholder
	    $(this).attr('placeholder', ''); //No placeholder in this inputfield (only when focus and empty)
    }
  }).focusout()//trigger the focusout event manually so the correct classes will be set


// when user clicks on the input field  
   $(".floatingLabel.firstname input").focus(function(){ // Then when input is focussed:
   $(this).parent().removeClass("placeholdLabel"); //Remove the label as placeholder
   $(this).parent().addClass("floatThyLabel"); //Take the label above the input field
   $(this).attr('placeholder', 'Please type in your firstname'); //Set a placeholder in this inputfield because user is focussed and input is still empty
  })
  .blur(function(){ // when losing the focus:
  var inputLength = $(this).val();
	if (inputLength.length > 0) { //if something is in the input field
		console.log('has something');
		// here you add whatever class you want to add to other element
		$(this).parent().removeClass("placeholdLabel");//Remove the label as placeholder
		$(this).parent().addClass("floatThyLabel"); //Leave the label above the input field
		$(this).attr('placeholder', ''); //Remove the placeholder to be sure
	} else {
		console.log('has nothing'); //when nothing is in the input field
		// here some other action
		$(this).parent().removeClass("floatThyLabel"); //Remove the label above the input field
		$(this).parent().addClass("placeholdLabel");//Set the label back as a placeholder
		$(this).attr('placeholder', '');  //Remove the placeholder so no double texts are presented
	}
	})
// when user clicks on label instead of input field
  $(".floatingLabel.firstname label").click(function(){ // Then when input is focussed:
   $(this).parent().removeClass("placeholdLabel"); //Remove the label as placeholder
   $(this).parent().addClass("floatThyLabel"); //Take the label above the input field
   $(".floatingLabel.firstname input").focus().attr('placeholder', 'Please type in your firstname'); //Set a placeholder in this inputfield because user is focussed and input is still empty
  })
  .blur(function(){ // when losing the focus:
  var inputLength = $(this).val();
	if (inputLength.length > 0) { //if something is in the input field
		console.log('has something');
		// here you add whatever class you want to add to other element
		$(this).parent().removeClass("placeholdLabel");//Remove the label as placeholder
		$(this).parent().addClass("floatThyLabel"); //Leave the label above the input field
		$(this).attr('placeholder', ''); //Remove the placeholder to be sure
	} else {
		console.log('has nothing'); //when nothing is in the input field
		// here some other action
		$(this).parent().removeClass("floatThyLabel"); //Remove the label above the input field
		$(this).parent().addClass("placeholdLabel");//Set the label back as a placeholder
		$(this).attr('placeholder', '');  //Remove the placeholder so no double texts are presented
	}
	})  
  
//repeat
//For each inputfield who needs a different placeholder text [the text that temp. shows up when you focus on the input field] you must make a new function
  $(".floatingLabel.lastname input").focus(function(){
   $(this).parent().removeClass("placeholdLabel");
   $(this).parent().addClass("floatThyLabel");
   $(this).attr('placeholder', 'Please type in your lastname'); 
  })
  .blur(function(){
  var inputLength = $(this).val();
	if (inputLength.length > 0) {
		console.log('has something');
		// here you add whatever class you want to add to other element
		$(this).parent().removeClass("placeholdLabel");
		$(this).parent().addClass("floatThyLabel");
		$(this).attr('placeholder', '');
	} else {
		console.log('has nothing');
		// here some other action
		$(this).parent().removeClass("floatThyLabel");
		$(this).parent().addClass("placeholdLabel");
		$(this).attr('placeholder', '');
	}
	})
// when user clicks on label instead of input field
  $(".floatingLabel.lastname label").click(function(){ // Then when input is focussed:
   $(this).parent().removeClass("placeholdLabel"); //Remove the label as placeholder
   $(this).parent().addClass("floatThyLabel"); //Take the label above the input field
   $(".floatingLabel.lastname input").focus().attr('placeholder', 'Please type in your lastname'); //Set a placeholder in this inputfield because user is focussed and input is still empty
  })
  .blur(function(){ // when losing the focus:
  var inputLength = $(this).val();
	if (inputLength.length > 0) { //if something is in the input field
		console.log('has something');
		// here you add whatever class you want to add to other element
		$(this).parent().removeClass("placeholdLabel");//Remove the label as placeholder
		$(this).parent().addClass("floatThyLabel"); //Leave the label above the input field
		$(this).attr('placeholder', ''); //Remove the placeholder to be sure
	} else {
		console.log('has nothing'); //when nothing is in the input field
		// here some other action
		$(this).parent().removeClass("floatThyLabel"); //Remove the label above the input field
		$(this).parent().addClass("placeholdLabel");//Set the label back as a placeholder
		$(this).attr('placeholder', '');  //Remove the placeholder so no double texts are presented
	}
	})
});

But I bet someone can make this javascript shorter ;)

Codepen link: https://codepen.io/anon/pen/LmXEXv

 

edit: Already made it a bit shorter and added codepen link
edit2: Added label clicking/touching so you are not limited to only the input itself

answered