Fading label in p:selectOneMenu

UlrichC
Posts: 18
Joined: 03 Sep 2015, 23:49

02 Mar 2017, 01:54

Hello Primefaces-team,

I have bought Ultima-Theme and layout and I would like to know, if it is possible to have a similar effect in p:selectOneMenu as the text-fields with the label, which fades above. This would be fine and consistent with p:selectOneMenu...

Thanks in advance,
UlrichC

AndrewGr
Posts: 19
Joined: 22 Mar 2016, 08:49
Location: Hong Kong

03 Mar 2017, 08:26

Hi! Unbelievable, but I came to the forum to post absolutely the same issue! Also looking for the proper implementation of the label effect for the p:selectOneMenu. Thank you!
Best regards,
Andrew

mert.sincan
Posts: 4765
Joined: 29 Jun 2013, 12:38

07 Mar 2017, 14:12

We didn't add animation for selectOneMenu. On Material Design, can you please give a link that contains an animation example for dropdown components?

UlrichC
Posts: 18
Joined: 03 Sep 2015, 23:49

07 Mar 2017, 17:17

HI aragorn,

I didn't have an example but it would easily be a bit more consistent, if the dropdown-fields would behave similar to the input fields in term of the "label".
If you have a registration-form with title, firstname, lastname like this:

title <dropdown>
firstname
lastname

Everone is asking, why title needs an extra label, but the other fields don't ;-).

Thanks for every hint,
Ulrich

myselfmohsin
Posts: 2
Joined: 22 Nov 2015, 15:58

09 Mar 2017, 20:04

Hi There,

I can understand that animation is not considered for selectOneMenu. Is there a way we can make first selected the option of menu greyed out.

I have following code. I want to show the first option in grey colour and rest of the options in normal black colour.

<p:selectOneMenu id="contactTitle" title="Title" onfocus="" effect="fold" >

<f:selectItem itemLabel="Title" itemValue="#{null}" itemDisabled="true"/>
<f:selectItem itemLabel="Mr" itemValue="Mr" />
<f:selectItem itemLabel="Miss" itemValue="Miss" />
</p:selectOneMenu>

Any suggestions. I will appreciate your help.

Thanks,
Mohsin

mert.sincan
Posts: 4765
Joined: 29 Jun 2013, 12:38

16 Mar 2017, 14:47

Please try the following page;

Code: Select all

<ui:composition 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"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style>
            .md-selectonemenu {
                display: block;
                position:relative; 
            }

            .md-selectonemenu .ui-selectonemenu > label {
                color: transparent;
            }

            .md-selectonemenu .ui-selectonemenu.ui-state-filled > label {
                color: #212121;
            }

            .md-selectonemenu .ui-selectonemenu.ui-state-focus ~ label,
            .md-selectonemenu .ui-state-filled ~ label {
                top:-20px;
                font-size:12px;
                color:#3F51B5;
            }

            .md-selectonemenu > 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;
            }
        </style>

        <script type="text/javascript">
            //<![CDATA[
            $(function () {
                var oneMenu = $('.md-selectonemenu > .ui-selectonemenu');

                for (var i = 0; i < oneMenu.length; i++) {
                    var selectTag = oneMenu.eq(i).find('select');

                    if (selectTag.val() != "") {
                        oneMenu.addClass("ui-state-filled");
                    }
                }
            });

            function animationFun($this) {
                var menuId = $($this).closest('.ui-selectonemenu').attr('id'),
                        menu = $(PrimeFaces.escapeClientId(menuId)),
                        selectTag = menu.find('select');

                if (selectTag.val() != "") {
                    menu.addClass("ui-state-filled");
                } else {
                    menu.removeClass("ui-state-filled");
                }
            }
            //]]>
        </script>
    </ui:define>

    <ui:define name="content">

        <div class="ui-g ui-fluid">
            <div class="ui-g-12 ui-lg-6">
                <div class="card card-w-title">
                    <h1 style="padding-bottom: 20px;">SelectOneMenu</h1>

                    <h:panelGroup styleClass="md-selectonemenu">
                        <p:selectOneMenu id="console"  onchange="animationFun(this)">
                            <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>Select One</label>
                    </h:panelGroup>

                </div>
            </div>
        </div>

    </ui:define>

</ui:composition>
Screenshots;
Image

Image

UlrichC
Posts: 18
Joined: 03 Sep 2015, 23:49

16 Mar 2017, 17:31

Oh, that's sooo cool. Thanks... with that I can live ;-)
Thank you so much!

This should definitively go into the next bugfix-release for Ultima!

brabuh
Posts: 15
Joined: 26 May 2016, 04:42

24 Mar 2017, 08:02

aragorn wrote:
16 Mar 2017, 14:47
Please try the following page;

Code: Select all

<ui:composition 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"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style>
            .md-selectonemenu {
                display: block;
                position:relative; 
            }

            .md-selectonemenu .ui-selectonemenu > label {
                color: transparent;
            }

            .md-selectonemenu .ui-selectonemenu.ui-state-filled > label {
                color: #212121;
            }

            .md-selectonemenu .ui-selectonemenu.ui-state-focus ~ label,
            .md-selectonemenu .ui-state-filled ~ label {
                top:-20px;
                font-size:12px;
                color:#3F51B5;
            }

            .md-selectonemenu > 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;
            }
        </style>

        <script type="text/javascript">
            //<![CDATA[
            $(function () {
                var oneMenu = $('.md-selectonemenu > .ui-selectonemenu');

                for (var i = 0; i < oneMenu.length; i++) {
                    var selectTag = oneMenu.eq(i).find('select');

                    if (selectTag.val() != "") {
                        oneMenu.addClass("ui-state-filled");
                    }
                }
            });

            function animationFun($this) {
                var menuId = $($this).closest('.ui-selectonemenu').attr('id'),
                        menu = $(PrimeFaces.escapeClientId(menuId)),
                        selectTag = menu.find('select');

                if (selectTag.val() != "") {
                    menu.addClass("ui-state-filled");
                } else {
                    menu.removeClass("ui-state-filled");
                }
            }
            //]]>
        </script>
    </ui:define>

    <ui:define name="content">

        <div class="ui-g ui-fluid">
            <div class="ui-g-12 ui-lg-6">
                <div class="card card-w-title">
                    <h1 style="padding-bottom: 20px;">SelectOneMenu</h1>

                    <h:panelGroup styleClass="md-selectonemenu">
                        <p:selectOneMenu id="console"  onchange="animationFun(this)">
                            <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>Select One</label>
                    </h:panelGroup>

                </div>
            </div>
        </div>

    </ui:define>

</ui:composition>
Screenshots;
Image

Image

Great fix, but I do have a problem, I have a switch that update some panels when changes

Code: Select all

<p:inputSwitch id="illuminaClipSwitch" value="#{trimmBean.desabilitarIlluminaClip}">
<p:ajax event="change" update="illuminaClipGridContainer, illuminaClipGrid" />
</p:inputSwitch>

Code: Select all

<p:outputPanel id="illuminaClipGridContainer" layout="block">
									
<p:panelGrid id="illuminaClipGrid" columns="1" layout="grid" styleClass="ui-panelgrid-blank form-group" rendered="#{trimmBean.desabilitarIlluminaClip}">
<h:panelGroup styleClass="md-selectonemenu" >
  <p:selectOneMenu id="illuminaclip" value="#{trimmBean.illuminaClipOneMenu}"  onchange="animationFun(this)" style="margin-bottom:20px;">
<f:selectItem itemLabel="TruSeq2 (single-end, for Illumina GAII)" itemValue="TruSeq2" />
<f:selectItem itemLabel="TruSeq3 (single-end, for MiSeq and HiSeq)" itemValue="TruSeq3" />
</p:selectOneMenu>
<label>Adapter sequences to use</label>
  </h:panelGroup
</p:panelGrid>
 </p:outputPanel>
 
And when I press the switch the animationFun doesn't work properly

mert.sincan
Posts: 4765
Joined: 29 Jun 2013, 12:38

27 Mar 2017, 13:53

I couldn't replicate this issue. Can you please try the following example page?

Code: Select all

<ui:composition 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"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style>
            .md-selectonemenu {
                display: block;
                position:relative; 
            }

            .md-selectonemenu .ui-selectonemenu > label {
                color: transparent;
            }

            .md-selectonemenu .ui-selectonemenu.ui-state-filled > label {
                color: #212121;
            }

            .md-selectonemenu .ui-selectonemenu.ui-state-focus ~ label,
            .md-selectonemenu .ui-state-filled ~ label {
                top:-20px;
                font-size:12px;
                color:#3F51B5;
            }

            .md-selectonemenu > 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;
            }
        </style>

        <script type="text/javascript">
            //<![CDATA[
            $(function () {
                var oneMenu = $('.md-selectonemenu > .ui-selectonemenu');

                for (var i = 0; i < oneMenu.length; i++) {
                    var selectTag = oneMenu.eq(i).find('select');

                    if (selectTag.val() != "") {
                        oneMenu.addClass("ui-state-filled");
                    }
                }
            });

            function animationFun($this) {
                var menuId = $($this).closest('.ui-selectonemenu').attr('id'),
                        menu = $(PrimeFaces.escapeClientId(menuId)),
                        selectTag = menu.find('select');

                if (selectTag.val() != "") {
                    menu.addClass("ui-state-filled");
                } else {
                    menu.removeClass("ui-state-filled");
                }
            }
            //]]>
        </script>
    </ui:define>

    <ui:define name="content">

        <div class="ui-g ui-fluid">
            <div class="ui-g-12 ui-lg-6">
                <div class="card card-w-title">
                    <h:form>
                        <h1 style="padding-bottom: 20px;">SelectOneMenu</h1>
                        <p:inputSwitch id="illuminaClipSwitch" value="#{basicView.isRendered}">
                            <p:ajax event="change" update="illuminaClipGridContainer, illuminaClipGrid"  />
                        </p:inputSwitch>
                        <p:outputPanel id="illuminaClipGridContainer" layout="block" style="margin-top:30px;">
                            <p:panelGrid id="illuminaClipGrid" columns="1" layout="grid" styleClass="ui-panelgrid-blank form-group" rendered="#{basicView.isRendered}">
                                <h:panelGroup styleClass="md-selectonemenu">
                                    <p:selectOneMenu id="console" onchange="animationFun(this)">
                                        <f:selectItem itemLabel="TruSeq2 (single-end, for Illumina GAII)" itemValue="TruSeq2" />
                                        <f:selectItem itemLabel="TruSeq3 (single-end, for MiSeq and HiSeq)" itemValue="TruSeq3" />
                                    </p:selectOneMenu>
                                    <label>Adapter sequences to use</label>
                                </h:panelGroup>
                            </p:panelGrid>
                        </p:outputPanel>
                    </h:form>
                </div>
            </div>
        </div>

    </ui:define>

</ui:composition>
Also, can you please attach a sample video for this issue.

brabuh
Posts: 15
Joined: 26 May 2016, 04:42

01 Apr 2017, 11:41

aragorn wrote:
27 Mar 2017, 13:53
I couldn't replicate this issue. Can you please try the following example page?

Code: Select all

<ui:composition 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"
                template="/WEB-INF/template.xhtml">

    <ui:define name="head">
        <style>
            .md-selectonemenu {
                display: block;
                position:relative; 
            }

            .md-selectonemenu .ui-selectonemenu > label {
                color: transparent;
            }

            .md-selectonemenu .ui-selectonemenu.ui-state-filled > label {
                color: #212121;
            }

            .md-selectonemenu .ui-selectonemenu.ui-state-focus ~ label,
            .md-selectonemenu .ui-state-filled ~ label {
                top:-20px;
                font-size:12px;
                color:#3F51B5;
            }

            .md-selectonemenu > 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;
            }
        </style>

        <script type="text/javascript">
            //<![CDATA[
            $(function () {
                var oneMenu = $('.md-selectonemenu > .ui-selectonemenu');

                for (var i = 0; i < oneMenu.length; i++) {
                    var selectTag = oneMenu.eq(i).find('select');

                    if (selectTag.val() != "") {
                        oneMenu.addClass("ui-state-filled");
                    }
                }
            });

            function animationFun($this) {
                var menuId = $($this).closest('.ui-selectonemenu').attr('id'),
                        menu = $(PrimeFaces.escapeClientId(menuId)),
                        selectTag = menu.find('select');

                if (selectTag.val() != "") {
                    menu.addClass("ui-state-filled");
                } else {
                    menu.removeClass("ui-state-filled");
                }
            }
            //]]>
        </script>
    </ui:define>

    <ui:define name="content">

        <div class="ui-g ui-fluid">
            <div class="ui-g-12 ui-lg-6">
                <div class="card card-w-title">
                    <h:form>
                        <h1 style="padding-bottom: 20px;">SelectOneMenu</h1>
                        <p:inputSwitch id="illuminaClipSwitch" value="#{basicView.isRendered}">
                            <p:ajax event="change" update="illuminaClipGridContainer, illuminaClipGrid"  />
                        </p:inputSwitch>
                        <p:outputPanel id="illuminaClipGridContainer" layout="block" style="margin-top:30px;">
                            <p:panelGrid id="illuminaClipGrid" columns="1" layout="grid" styleClass="ui-panelgrid-blank form-group" rendered="#{basicView.isRendered}">
                                <h:panelGroup styleClass="md-selectonemenu">
                                    <p:selectOneMenu id="console" onchange="animationFun(this)">
                                        <f:selectItem itemLabel="TruSeq2 (single-end, for Illumina GAII)" itemValue="TruSeq2" />
                                        <f:selectItem itemLabel="TruSeq3 (single-end, for MiSeq and HiSeq)" itemValue="TruSeq3" />
                                    </p:selectOneMenu>
                                    <label>Adapter sequences to use</label>
                                </h:panelGroup>
                            </p:panelGrid>
                        </p:outputPanel>
                    </h:form>
                </div>
            </div>
        </div>

    </ui:define>

</ui:composition>
Also, can you please attach a sample video for this issue.

Well, I did that and I end up with this

The selectonemenu doesn't show the default selection from managedbean
Image

And if I try to select the default again this happen
Image
Image

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests