It seems that there is no support for styleClass="md-inputfield" in Verona, is that correct or am I missing something?
Regards,
BTJ
No support for styleClass="md-inputfield" in Verona?
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Verona doesn't have the "md-inputfield" class. This class is for our Material Layouts; Barcelona Layout and Ultima Layout.
Github Profile: https://github.com/mertsincan
Well, that explains it..
Btw, would you consider implementing this feature on other themes than those using Material layouts? I really like that feature...
Btw, would you consider implementing this feature on other themes than those using Material layouts? I really like that feature...
PrimeFaces 11.x | PrimeVue 3.x | Spring Boot 2.7.x | Undertow | Mojarra 2.3.x
Mac OS, Firefox and Chromium
Mac OS, Firefox and Chromium
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
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>
Github Profile: https://github.com/mertsincan
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
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
PrimeFaces 11.x | PrimeVue 3.x | Spring Boot 2.7.x | Undertow | Mojarra 2.3.x
Mac OS, Firefox and Chromium
Mac OS, Firefox and Chromium
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I couldn't replicate it. Could you please attach a sample page and screenshot for me?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.
Github Profile: https://github.com/mertsincan
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>
PrimeFaces 11.x | PrimeVue 3.x | Spring Boot 2.7.x | Undertow | Mojarra 2.3.x
Mac OS, Firefox and Chromium
Mac OS, Firefox and Chromium
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Please add my css and js codes into <h:head> tag.
Github Profile: https://github.com/mertsincan
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
Glad to hear, thanks for the update!
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 4 guests