p:autocomplete multiple="true" label covering text

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

04 Oct 2018, 23:46

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

huseyinT
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

nova-usman
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.

User avatar
aragorn
Posts: 3466
Joined: 29 Jun 2013, 12:38

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() {
        ...

Post Reply

Return to “Ultima - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest