Skip to content

Instantly share code, notes, and snippets.

@icreatesolutions
Last active October 24, 2018 04:25
Show Gist options
  • Save icreatesolutions/6a213afffb683f0c90dddbb5b4f21a56 to your computer and use it in GitHub Desktop.
Save icreatesolutions/6a213afffb683f0c90dddbb5b4f21a56 to your computer and use it in GitHub Desktop.
Gravity Form - Label Minimising
// Target Gravity Form Inputs
var inputs = '.ginput_container input';
emFieldFocus(inputs);
// Failed Submission
$(document).on('gform_post_render', function(){
$(inputs).each(function() {
if( $(this).val() ) {
$(this).parents('.ginput_container').siblings('.gfield_label').addClass('filling');
}
});
emFieldFocus(inputs);
});
// Field Focus Add/Remove Filling Class
function emFieldFocus(inputs) {
jQuery(inputs).on( 'focus', function() {
jQuery(this).parents('.ginput_container').siblings('.gfield_label').addClass('filling');
});
jQuery(inputs).on( 'focusout', function() {
if( !jQuery(this).val() ) {
jQuery(this).parents('.ginput_container').siblings('.gfield_label').removeClass('filling');
}
});
}
.gfield {
position: relative;
}
.gfield_label {
position: absolute;
left: 27px;
top: -14px;
line-height: 1;
margin-bottom: 0;
transform: scale(1.36364) translateY(180%);
transform-origin: 0 0;
transition: .25s;
cursor: text;
font-size: 12px;
&.filling {
left: 15px;
top: -16px;
-webkit-transform: scale(.99);
-ms-transform: scale(.99);
transform: scale(.99);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment