Page 1 of 1

p:autocomplete multiple="true" label covering text

Posted: 04 Oct 2018, 23:46
by nova-usman
Hi,

Image

Code: Select all

                                <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

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

Posted: 05 Oct 2018, 06:56
by huseyinT
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

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

Posted: 06 Oct 2018, 12:19
by nova-usman
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.

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

Posted: 08 Oct 2018, 10:09
by aragorn
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() {
        ...