Float labels mess layout of element when used with bootstrap input group

[jayminesprit]

It is messing layout when used with bootstrap input group. (I.e : color-pickers, date/time pickers etc) I have tried few hacks in code :

hasParent: function( el )
{
    if(jQuery(el).closest(".input-group").length && jQuery(el).closest(".fl-wrap").length){
        return false;
    }
    else{
        return el.parentNode.classList.contains( this.prefixed( 'wrap' ));
    }
},

wrapLabel: function( labelEl, el )
{
    var wrapper = this.createEl( 'div', {
        class: this.prefixed( 'wrap' ) + ' ' + this.prefixed( 'wrap-' + el.tagName.toLowerCase() ),
    });
    if( el.value !== undefined && el.value.length ) {
        wrapper.classList.add( this.prefixed( 'is-active' ));
    }
    if( el.getAttribute( 'required' ) !== null || el.classList.contains( this.config[this.current].requiredClass )) {
        wrapper.classList.add( this.prefixed( 'is-required' ));
    }
    if(jQuery(el).closest(".input-group").length){
        jQuery(el).closest(".input-group")[0].parentNode.insertBefore( wrapper, jQuery(el).closest(".input-group")[0] );
        wrapper.appendChild( jQuery(el).closest(".input-group")[0] );
    }
    else{
        el.parentNode.insertBefore( wrapper, el );
        wrapper.appendChild( el );
    }
    wrapper.appendChild( labelEl );
}

Above code did what i wanted but few things broken like when input is blank it does not removes fl-is-active also it is adding fl-wrap div multiple time.

Any quick fix for input-group ?

Also it does not work with select 2, In multiple option selection it is still adding label as a first option as a selected. Any way i can fix it ?

[pryley]

Regarding Select2 compatibility, please see issue #15 for more information.

For Bootstrap input groups you will need to either exclude them from being transformed by float-labels, or add custom CSS to fix the layout.

Example:

var floatlabels = new FloatLabels( 'form', {
    exclude: '.input-group input, select.select2',
});

[jayminesprit]

Ok Thanks Pryley. I know we can exclude them but excluding them makes form odd-even in terms of design. However yes for now i am able to fix both things using additional javascript/CSS.

Thanks again.