CODEWITHSUNDEEP
jsfprimefaces
Nikita
Nikita

Reputation: 365

Editable p:selectOneMenu

How to set placeholder in editable <p:selectOneMenu>?

In editable <p:selectOneMenu> of PrimeFaces, initial UI looks as below:

http://www.primefaces.org/showcase/ui/input/oneMenu.xhtml (see the editable menu)

Is there a way to place a placeholder which says text like "Click to enter manual input" or to make user aware that this dropdown is editable. Find the code snippet below for reference.

<div class="setupDataSection">
    <div class="pageCenter pageCenterShortened">
        <div style="float: left;" class="sectionTitle sectionTitleInline">
            <h:outputLabel value="Tenant "/>
        </div>
        <div style="float: left; padding-left: 40px;">

            <p:selectOneMenu id="tenant"
                             styleClass="ddlPOS"
                             style="width: 190px;"
                             label="Tenant"
                             value="#{onBoardingAction.selTenant}"
                             editable="true">

                <p:watermark for="tenant"
                             value="Search with a keyword"
                             id="watermark" />

                <f:selectItem itemLabel="Add new tenant" />
                <f:selectItems value="#{onBoardingAction.tenants}" />

                <p:ajax event="change"
                        execute="@this"
                        update="tenant region POS"
                        listener="#{onBoardingAction.settingRegions()}" />
            </p:selectOneMenu>
        </div>
    </div>
</div>

Upvotes: 0

Views: 4307

Answers (1)

Sarz
Sarz

Reputation: 1976

Primefaces call it watermark SEE, If your SelectOneMenu is empty this water martk's text automatically appears 

<p:watermark for="fileSize" value="Search with a keyword" id="watermark" />

Update I have tested your code and It work fine for me if you are using template maybe your CSS overriding component try this, I just put p:watermark outside the component code:

            <f:selectItem itemLabel="Add new tenant" />
            <f:selectItems value="#{onBoardingAction.tenants}" />

            <p:ajax event="change"
                    execute="@this"
                    update="tenant region POS""
                    listener="#{onBoardingAction.settingRegions()}" />
        </p:selectOneMenu>

         <p:watermark for="tenant"
                         value="Search with a keyword"
                         id="watermark" />

HOPE RESOLVED :)

Upvotes: 1

Related Questions