Problems with versions compatibility

[alexanderdm]

Dear mert.sincan!

I have simplified my example and fully implemented your suggestion:

https://github.com/alexanderdmin/pf-sap ... rial.xhtml


The initial problem disappeared, but a new one occured, namely that the label(s) of the input fields are misplaced below the input fields, instead of above them. Also, their labels do not move dynamically whenever an input field gains focus, as was the case before, but stay statically instead.
This is how the changed page looks now:

https://github.com/alexanderdmin/pf-sap ... -26-31.png

https://github.com/alexanderdmin/pf-sap ... -26-37.png


Would you please check it once again on your side?

Thank you and kind regards,
Alex

[mert.sincan]

Thanks a lot for the attached files! I'll check and get back to you.

[mert.sincan]

Please try;

Code: Select all

      <div class="card card-w-title">

                <style>
                    body .ui-float-label .ui-inputfield::placeholder {
                        opacity: 0;
                        transition: all 0.2s;
                    }

                    body .ui-float-label .ui-inputfield.ui-state-focus::placeholder {
                        opacity: 1;
                    }
                </style>

                <script>
                if(window.PrimeFaces) {
                    PrimeFaces.updateFilledState = function (input, parent) {
                        setTimeout(function () {
                            var value = input.val();

                            if (typeof (value) == 'undefined') {
                                return;
                            }

                            if (value.length) {
                                input.addClass('ui-state-filled');

                                if (parent.is("span:not('.ui-float-label')")) {
                                    parent.addClass('ui-inputwrapper-filled');
                                }
                            } else {
                                input.removeClass('ui-state-filled');
                                parent.removeClass('ui-inputwrapper-filled');
                            }
                        }, 10);
                    };
                }
                </script>

                <h:form id="inseratForm">
                    <div class="card-title">Objekt anlegen trial</div>
                    <div class="ui-g ui-fluid">
                        <div class="ui-g-12 ui-md-6">
                            <h:panelGroup styleClass="ui-float-label">
                                <p:inputNumber id="betriebsKostenId" ... />
                                <label>Betriebskosten (netto), EUR</label>
                            </h:panelGroup>
                            <p:message for="betriebsKostenId" style="color: red">
                                <p:autoUpdate />
                            </p:message>
                        </div>
                    </div>
                </h:form>
            </div>

Best Regards,