Prime Community Forum

Posted: **04 Oct 2018, 23:46**

Hi,

                                <h:panelGroup styleClass="md-inputfield">
                                    <p:autoComplete id="dcNo" value="#{saleInvoiceBean3.selectedDcs}" 
                                                    readonly="#{not saleInvoiceBean3.editable}"
                                                    completeMethod="#{saleInvoiceBean3.autoCompleteDc}"
                                                    multiple="true" scrollHeight="200"
                                                    dropdown="true"
                                                    var="o" itemLabel="#{o.getPrefixDeliveryChallanId()}" itemValue="#{o}" 
                                                    forceSelection="true"
                                                    converter="salesModuleConverter" 
                                                    required="#{param['validateSaveButton']!=null}"         
                                                    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"/>

                                    </p:autoComplete>
                                    <label>Delivery Challan(s) * </label>
                                    <p:message for="dcNo"/>
                                </h:panelGroup>

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

Posted: **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

Posted: **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.

Posted: **08 Oct 2018, 10:09**

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

layout.js

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) {
                this.jq.addClass('md-inputwrapper-filled');
            }
        /**************** END *************************/

        this.multiItemContainer.hover(function() {
        ...

Prime Community Forum

p:autocomplete multiple="true" label covering text

p:autocomplete multiple="true" label covering text

Re: p:autocomplete multiple="true" label covering text

Re: p:autocomplete multiple="true" label covering text

Re: p:autocomplete multiple="true" label covering text