Autocomplete (multiple="true") Label not displaying properly

[nova-usman]

Hi,
My code is as follows:

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>

On opening of page, when the data is already retrieved from database, the label is Delivery Challan(s) * is being displayed on the input level. Difficult to describe in words but easy to show as displayed in the following screenshot


Once I click on this autocomplete component, then the label becomes higher then the input and is displayed as it should, which can be seen from the screenshot below.


Kindly please tell me how to rectify this issue.

Regards

[huseyinT]

The images do not appear.