Fixed for next version. For now, you can make the following changes to test;
- Please add the code in layout.js;
Code: Select all
//line 751
if(PrimeFaces.widget.SelectOneMenu) {
PrimeFaces.widget.SelectOneMenu = PrimeFaces.widget.SelectOneMenu.extend({
init: function(cfg) {
this._super(cfg);
var $this = this;
if(!this.disabled && this.jq.parent().hasClass('md-inputfield')) {
this.itemsContainer.children('.ui-selectonemenu-item:first').css({'display': 'none'});
if (this.input.val() != "") {
this.jq.addClass("ui-state-filled");
}
this.input.off('change').on('change', function() {
$this.inputValueControl($(this));
});
if(this.cfg.editable) {
this.label.on('input', function(e) {
$this.inputValueControl($(this));
}).on('focus', function() {
$this.jq.addClass('ui-state-focus');
}).on('blur', function() {
$this.jq.removeClass('ui-state-focus');
$this.inputValueControl($(this));
});
}
}
},
inputValueControl: function(input) {
if (input.val() != "")
this.jq.addClass("ui-state-filled");
else
this.jq.removeClass("ui-state-filled");
}
});
}
- Change the code block into _forms.scss
Code: Select all
//line 53
.md-inputfield {
display: block;
position:relative;
input:focus ~ label,
input.ui-state-filled ~ label,
textarea:focus ~ label,
textarea.ui-state-filled ~ label,
.ui-selectonemenu.ui-state-focus ~ label,
.ui-selectonemenu.ui-state-filled ~ label,
.md-inputwrapper-focus ~ label,
.md-inputwrapper-filled ~ label{
top:-20px;
font-size:12px;
color:$primaryColor;
}
input:-webkit-autofill ~ label {
top:-20px;
font-size:12px;
color:$primaryColor;
}
label:not(.ui-selectonemenu-label) {
color:#999;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:1px;
transition: $transitionDuration ease all;
-moz-transition: $transitionDuration ease all;
-webkit-transition: $transitionDuration ease all;
}
input.ui-state-error ~ label,
.ui-selectonemenu.ui-state-focus.ui-state-error ~ label,
.ui-selectonemenu.ui-state-filled.ui-state-error ~ label {
color: $inputErrorTextColor;
}
.ui-message {
&.ui-message-error {
background-color: transparent;
border: 0 none;
margin: 0px;
color: $inputErrorTextColor;
font-size: $errorMessageFontSize;
.ui-message-error-icon {
color: $inputErrorTextColor;
font-size: $errorMessageIconFontSize;
top: 2px;
}
}
}
&.md-inputfield-fill {
input {
background-color: $textboxBgColor;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
}
label {
top: 2px;
}
input:focus ~ label,
input.ui-state-filled ~ label,
textarea:focus ~ label,
textarea.ui-state-filled ~ label,
.ui-selectonemenu.ui-state-focus ~ label,
.ui-selectonemenu.ui-state-filled ~ label,
.md-inputwrapper-focus ~ label,
.md-inputwrapper-filled ~ label {
top:-20px;
font-size:12px;
color:$primaryColor;
}
}
&.md-inputfield-box {
background-color: $inputFieldBoxBgColor;
height: 44px;
>*:not(label) {
bottom: 0px;
position: absolute;
background-color: $textboxBgColor;
}
>label {
top: 23px;
}
input:focus ~ label,
input.ui-state-filled ~ label,
textarea:focus ~ label,
textarea.ui-state-filled ~ label,
.ui-selectonemenu.ui-state-focus ~ label,
.ui-selectonemenu.ui-state-filled ~ label,
.md-inputwrapper-focus ~ label,
.md-inputwrapper-filled ~ label {
top:1px;
}
.input:-webkit-autofill ~ label {
top:1px;
}
}
}
// line 165
- Add the variables
in _commons.scss;
in _theme.scss
Code: Select all
//line 15
$inputBorderErrorColor:#e62a10;
$inputFieldLabelTextColor:#999999;
$inputFieldBoxBgColor:#f7f7f7;
$inputFieldFillBgColor:#f7f7f7;
$inputAutoFillBorderColor: #bdbdbd;
//line 19