SelectOneMneu - label does not move

Post Reply
kimg
Posts: 36
Joined: 22 Aug 2013, 17:13

16 Nov 2018, 01:02

According to Googles guidelines for material design is should work like this:

https://material-components.github.io/m ... ent/select

but when i do like this in my JSF page the value chosen is overwriting the label. Leaving it unreadable.

Code: Select all

<h:panelGroup styleClass="md-inputfield">
                        <p:selectOneMenu id="city" value="#{selectOneMenuView.city}" effect="fold" editable="true" >
                            <f:selectItem itemLabel="Select One" itemValue="" />
                            <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
                            <f:selectItem itemLabel="PS4" itemValue="PS4" />
                            <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
                        </p:selectOneMenu>
                            <label>Name</label>
 </h:panelGroup>
Am I doing something wrong or is there an alterntiv way to do whatI'm trying to achieve?

Kim
Primefaces 6.2 / Glassfish 5 / Payara 5.182

User avatar
aragorn
Posts: 3268
Joined: 29 Jun 2013, 12:38

16 Nov 2018, 09:43

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;

Code: Select all

//line 8
$textboxBgColor:#f7f7f7;
in _theme.scss

Code: Select all

//line 15
$inputBorderErrorColor:#e62a10;
$inputFieldLabelTextColor:#999999;
$inputFieldBoxBgColor:#f7f7f7;
$inputFieldFillBgColor:#f7f7f7;
$inputAutoFillBorderColor: #bdbdbd;
//line 19

User avatar
aragorn
Posts: 3268
Joined: 29 Jun 2013, 12:38

16 Nov 2018, 09:46

Demo;

Code: Select all

<h:panelGroup styleClass="md-inputfield md-inputfield-box">
    <p:selectOneMenu id="city2" value="#{selectOneMenuView.city}" effect="fold" editable="true" >
        <f:selectItem itemLabel="Select One" itemValue="" />
        <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
        <f:selectItem itemLabel="PS4" itemValue="PS4" />
        <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
    </p:selectOneMenu>
    <label>Email</label>
</h:panelGroup>

kimg
Posts: 36
Joined: 22 Aug 2013, 17:13

16 Nov 2018, 12:01

Thanks a lot.
It seems to work.

Any information on when the next version will arrive?

Kim
Primefaces 6.2 / Glassfish 5 / Payara 5.182

User avatar
aragorn
Posts: 3268
Joined: 29 Jun 2013, 12:38

16 Nov 2018, 13:17

Thanks a lot for the update! I can do it for you next week.

kimg
Posts: 36
Joined: 22 Aug 2013, 17:13

16 Nov 2018, 15:38

Perfect.

thank you.
Will it be possible to see what other issues have been fixed or new things added?
Primefaces 6.2 / Glassfish 5 / Payara 5.182

User avatar
aragorn
Posts: 3268
Joined: 29 Jun 2013, 12:38

27 Nov 2018, 13:04

New version is released. You can download it from store. I'll update documentation asap.

Post Reply

Return to “Serenity - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest