No support for styleClass="md-inputfield" in Verona?

[bjorntj]

It seems that there is no support for styleClass="md-inputfield" in Verona, is that correct or am I missing something?


Regards,

BTJ

[mert.sincan]

Verona doesn't have the "md-inputfield" class. This class is for our Material Layouts; Barcelona Layout and Ultima Layout.

[bjorntj]

Well, that explains it..

Btw, would you consider implementing this feature on other themes than those using Material layouts? I really like that feature...

[mert.sincan]

Please try the following code;

Code: Select all

<style type="text/css">
body .md-inputfield {
    display: block;
    position: relative;
}

body .md-inputfield label {
    color: #999;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 1px;
    transition: 0.3s ease all;
    -moz-transition: 0.3s ease all;
    -webkit-transition: 0.3s ease all;
}

body .md-inputfield input:focus ~ label,
body .md-inputfield input.ui-state-filled ~ label, 
body .md-inputfield textarea:focus ~ label, 
body .md-inputfield textarea.ui-state-filled ~ label, 
body .md-inputfield .md-inputwrapper-focus ~ label, 
body .md-inputfield .md-inputwrapper-filled ~ label {
    top: -20px;
    font-size: 12px;
    color: #9fd037;
}

body .ui-inputfield,
body .ui-inputfield.ui-state-hover,
body .ui-inputfield.ui-state-focus{
    border-width: 0 0 1px 0 !important;
}
   </style>
        
   <script type="text/javascript">
//<![CDATA[
/* JS extensions to support material animations */
PrimeFaces.skinInput = function(input) {
    setTimeout(function() {
        if(input.val() != '') {
            var parent = input.parent();
            input.addClass('ui-state-filled');
            
            if(parent.is("span:not('.md-inputfield')")) {
                parent.addClass('md-inputwrapper-filled');
            }
        }
    }, 1);
    
    input.on('mouseenter', function() {
        $(this).addClass('ui-state-hover');
    })
    .on('mouseleave', function() {
        $(this).removeClass('ui-state-hover');
    })
    .on('focus', function() {
        var parent = input.parent();
        $(this).addClass('ui-state-focus');
        
        if(parent.is("span:not('.md-inputfield')")) {
            parent.addClass('md-inputwrapper-focus');
        }
    })
    .on('blur', function() {
        $(this).removeClass('ui-state-focus');

        if(input.hasClass('hasDatepicker')) {
            setTimeout(function() {
                PrimeFaces.onInputBlur(input);
            },150);
        }
        else {
            PrimeFaces.onInputBlur(input);
        }
    });

    //aria
    input.attr('role', 'textbox')
            .attr('aria-disabled', input.is(':disabled'))
            .attr('aria-readonly', input.prop('readonly'));

    if(input.is('textarea')) {
        input.attr('aria-multiline', true);
    }

    return this;
};

PrimeFaces.onInputBlur = function(input) {
    var parent = input.parent(),
    hasInputFieldClass = parent.is("span:not('.md-inputfield')");
    
    if(parent.hasClass('md-inputwrapper-focus')) {
        parent.removeClass('md-inputwrapper-focus');
    }
    
    if(input.val() != '') {
        input.addClass('ui-state-filled');
        if(hasInputFieldClass) {
            parent.addClass('md-inputwrapper-filled');
        }
    }
    else {
        input.removeClass('ui-state-filled');
        parent.removeClass('md-inputwrapper-filled');
    }    
};

//]]>
</script>

Code: Select all

<h:panelGroup styleClass="md-inputfield">
      <p:inputText />
      <label>Name</label>
</h:panelGroup>

[bjorntj]

Thx... It almost works..
When I focus a p:inputtext the label move up but when the input field looses focus, the label moves down again, even if there is text there.
I tried this in the login page so also tested using p:password field and there the label works as it should...

BTJ

[mert.sincan]

When I focus a p:inputtext the label move up but when the input field looses focus, the label moves down again, even if there is text there.

I couldn't replicate it. Could you please attach a sample page and screenshot for me?

[bjorntj]

I am using the login page from the Verona theme..:

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
            <meta name="apple-mobile-web-app-capable" content="yes" />
        </f:facet>
        <title>Starumslinna Veglag</title>
    </h:head>

    <h:body styleClass="login-body">
        <div class="login-panel ui-fluid">
            <div class="ui-g">
                <div class="ui-g-12 logo-container">
                    <!--<p:graphicImage name="images/starumslinna_small.png" library="verona-layout" />-->
                    <p:graphicImage name="images/logo-dark.png" library="verona-layout" />
                    <h1>Starumslinna Veglag</h1>
                    <!--<h2>WELCOME TO VERONA</h2>-->
                </div>
                <h:form id="loginform">
                    <p:focus for="bruker"/>
                    <div class="ui-g-12">
                        <h:panelGroup styleClass="md-inputfield">
                            <p:inputText id="bruker" value="#{authenticationController.username}" maxlength="30"/>
                            <label>#{msgs.username}</label>
                        </h:panelGroup>
                    </div>
                    <div class="ui-g-12">
                        <h:panelGroup styleClass="md-inputfield">
                            <p:password feedback="false" value="#{authenticationController.password}" maxlength="30"/>
                            <label>#{msgs.password}</label>
                        </h:panelGroup>
                    </div>
                    <div class="ui-g-12 chkbox-container">
                        <!--<p:selectBooleanCheckbox id="remember-me" />
                        <p:outputLabel for="remember-me" value="Remember Me"/>-->
                    </div>
                    <div class="ui-g-12 button-container">
                        <!--<p:commandButton value="#{msgs.login}" icon="ui-icon-person" ajax="false" action="#{authenticationController.login}" update="messages" onclick="$.removeCookie('ultima_expandeditems', {path: '/'}); $.removeCookie('ultima_inlineprofile_expanded', {path: '/'});"/>-->
                        <p:commandButton value="#{msgs.login}" icon="ui-icon-person" ajax="false" action="#{authenticationController.login}" update="messages"/>
                        <p:messages id="messages" autoUpdate="true" globalOnly="false"/>
                    </div>
                </h:form>
            </div>
        </div>

        <h:outputStylesheet name="css/layout-#{guestPreferences.layout}.css" library="verona-layout" />

        <style type="text/css">
            body .md-inputfield {
                display: block;
                position: relative;
            }

            body .md-inputfield label {
                color: #999;
                font-weight: normal;
                position: absolute;
                pointer-events: none;
                left: 5px;
                top: 1px;
                transition: 0.3s ease all;
                -moz-transition: 0.3s ease all;
                -webkit-transition: 0.3s ease all;
            }

            body .md-inputfield input:focus ~ label,
            body .md-inputfield input.ui-state-filled ~ label,
            body .md-inputfield textarea:focus ~ label,
            body .md-inputfield textarea.ui-state-filled ~ label,
            body .md-inputfield .md-inputwrapper-focus ~ label,
            body .md-inputfield .md-inputwrapper-filled ~ label {
                top: -20px;
                font-size: 12px;
                color: #9fd037;
            }

            body .ui-inputfield,
            body .ui-inputfield.ui-state-hover,
            body .ui-inputfield.ui-state-focus{
                border-width: 0 0 1px 0 !important;
            }
        </style>

        <script type="text/javascript">
            //<![CDATA[
            /* JS extensions to support material animations */
            PrimeFaces.skinInput = function(input) {
                setTimeout(function() {
                    if(input.val() != '') {
                        var parent = input.parent();
                        input.addClass('ui-state-filled');

                        if(parent.is("span:not('.md-inputfield')")) {
                            parent.addClass('md-inputwrapper-filled');
                        }
                    }
                }, 1);

                input.on('mouseenter', function() {
                    $(this).addClass('ui-state-hover');
                })
                    .on('mouseleave', function() {
                        $(this).removeClass('ui-state-hover');
                    })
                    .on('focus', function() {
                        var parent = input.parent();
                        $(this).addClass('ui-state-focus');

                        if(parent.is("span:not('.md-inputfield')")) {
                            parent.addClass('md-inputwrapper-focus');
                        }
                    })
                    .on('blur', function() {
                        $(this).removeClass('ui-state-focus');

                        if(input.hasClass('hasDatepicker')) {
                            setTimeout(function() {
                                PrimeFaces.onInputBlur(input);
                            },150);
                        }
                        else {
                            PrimeFaces.onInputBlur(input);
                        }
                    });

                //aria
                input.attr('role', 'textbox')
                    .attr('aria-disabled', input.is(':disabled'))
                    .attr('aria-readonly', input.prop('readonly'));

                if(input.is('textarea')) {
                    input.attr('aria-multiline', true);
                }

                return this;
            };

            PrimeFaces.onInputBlur = function(input) {
                var parent = input.parent(),
                    hasInputFieldClass = parent.is("span:not('.md-inputfield')");

                if(parent.hasClass('md-inputwrapper-focus')) {
                    parent.removeClass('md-inputwrapper-focus');
                }

                if(input.val() != '') {
                    input.addClass('ui-state-filled');
                    if(hasInputFieldClass) {
                        parent.addClass('md-inputwrapper-filled');
                    }
                }
                else {
                    input.removeClass('ui-state-filled');
                    parent.removeClass('md-inputwrapper-filled');
                }
            };

            //]]>
        </script>
    </h:body>

</html>

[mert.sincan]

Please add my css and js codes into <h:head> tag.

[bjorntj]

Aaaah, of course...

Seems to work now, thx!

[mert.sincan]

Glad to hear, thanks for the update!