p:autocomplete multiple="true" label covering text

Post Reply
Posts: 5
Joined: 04 Feb 2016, 14:21

04 Oct 2018, 23:46



Code: Select all

                                <h:panelGroup styleClass="md-inputfield">
                                    <p:autoComplete id="dcNo" value="#{saleInvoiceBean3.selectedDcs}" 
                                                    readonly="#{not saleInvoiceBean3.editable}"
                                                    multiple="true" scrollHeight="200"
                                                    var="o" itemLabel="#{o.getPrefixDeliveryChallanId()}" itemValue="#{o}" 
                                                    requiredMessage="Please select delivery challan!" >

                                        <p:ajax event="itemSelect" listener="#{saleInvoiceBean3.handleDcSelect}" process="@this"
                                                update="dcNo sipTable grossTotal taxAmount grandTotal subSaleInvoicePanel minSplitAmount"/>
                                        <p:ajax event="itemUnselect" listener="#{saleInvoiceBean3.handleDcUnselect}" 
                                                update="dcNo sipTable grossTotal taxAmount grandTotal subSaleInvoicePanel minSplitAmount"/>

                                    <label>Delivery Challan(s) * </label>
                                    <p:message for="dcNo"/>
In case if the data is retrieved from database before the rendering of the page, the <label>Delivery Challan(s) * </label> covers the itemLabel of the primefaces autocomplete. This is only the case if the p:autoComplete has multiple="true";

Will be grateful for the help

Posts: 123
Joined: 27 Mar 2016, 13:05

05 Oct 2018, 06:56

I tried below code with using multiple="true". It's working correctly.

Code: Select all

<p:autoComplete id="acSimple" multiple="true" value="#{autoCompleteView.txt1}" completeMethod="#{autoCompleteView.completeText}" style="margin-bottom:10px;"/>
 <label>Delivery Challan(s) *</label>
Screen: https://ibb.co/iebcZK

Posts: 5
Joined: 04 Feb 2016, 14:21

06 Oct 2018, 12:19

I tried your code but I think it does not seem to work because of the <h:panelGroup styleClass="md-inputfield"> that contains p:autocomplete component. Will be grateful if anyone can help me out otherwise will have to change the UI Design and I will loose uniformity through out my project.

Posts: 4041
Joined: 29 Jun 2013, 12:38

08 Oct 2018, 10:09

Fixed for next version. Please make the following changes for now;


Code: Select all

//line 838
if(PrimeFaces.widget.AutoComplete) {
    PrimeFaces.widget.AutoComplete.prototype.setupMultipleMode = function() {
        var $this = this;
        this.multiItemContainer = this.jq.children('ul');
        this.inputContainer = this.multiItemContainer.children('.ui-autocomplete-input-token');
        /********* PLEASE ADD THESE LINES ****/
            if(this.hinput.children().length) {
        /**************** END *************************/

        this.multiItemContainer.hover(function() {

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest