Problems with versions compatibility

alexanderdm
Posts: 25
Joined: 02 Mar 2014, 12:26

09 Jun 2022, 08:06

Dear PrimeFace engineers!

Two years ago I have bought a Sapphire template and I am using it with PrimeFaces 7 and JSF 2.3. Bit as Melloware suggested in his comment to my question here

https://stackoverflow.com/questions/721 ... -the-value

it seems that I am " using a newer PF version than the Sapphire template was designed for and somehow the CSS isn't correct for the labels when there is a value. Feels like a bug in the CSS of the Sapphire template? "

Although I found a work-around for the problem above (and it was to remove the css class md-inputfield_marg_top from the input fields), the problem appeared now on another place in my application, even without the css class md-inputfield_marg_top), see the labels Vorname and Nachname below:

Image

In addition, there are other places, which also seem to have a Sapphire bug , for example, in the screenshot below

Image

the input field next to the label "Heizkosten (netto)" is not shown at all.

Could you please help me overcome these issues?

Thank you and kind regards,
Alexander Mintchev

mert.sincan
Posts: 5211
Joined: 29 Jun 2013, 12:38

16 Jun 2022, 12:19

Hi,

For placeholder issue, please try;

Code: Select all

body .md-inputfield .ui-inputfield::placeholder {
    opacity: 0;
    transition: all 0.2s;
}

body .md-inputfield .ui-inputfield.ui-state-focus::placeholder {
    opacity: 1;
}
For "Heizkosten (netto)" inputText, this is related to browser's zoom. Could you please check it?

Best Regards,

alexanderdm
Posts: 25
Joined: 02 Mar 2014, 12:26

22 Jun 2022, 18:37

Dear engineers!

Thank you very much for your help!

1.) For the placeholder issue I currently worked-around the problem by just omitting the placeholder. Will try your proposal ASAP and let you know.

2.) For the For "Heizkosten (netto)" inputText, this is really related to the browser zoom, you are right. When the browser is set to 100%, the problem disappears. But is this a solution? Isn't it there a better one?

3.) I would just like to point to yet another, very unpleasant problem: When I am in an input field, in which I have previously entered one or more values and now would like to enter yet another value, I press the "TAB" button, to see all my previous entries. The list with my previous values appears, but as long as I choose one of them, the whole layout of the form is "changed" or "moved to the right". I made a small video and uploaded it to my google photo account. The problem is shown starting from the 23-rd second:

https://photos.app.goo.gl/HJ4WQyxDw9QeRmFJA

Please help!

mert.sincan
Posts: 5211
Joined: 29 Jun 2013, 12:38

29 Jun 2022, 12:41

Hi,
1.) For the placeholder issue I currently worked-around the problem by just omitting the placeholder. Will try your proposal ASAP and let you know.
- Ok, thanks a lot!
2.) For the For "Heizkosten (netto)" inputText, this is really related to the browser zoom, you are right. When the browser is set to 100%, the problem disappears. But is this a solution? Isn't it there a better one?
- Yes, Primefaces components don't support the browser's zoom operations. Most components do some JS calculations on their own.
3.) I would just like to point to yet another, very unpleasant problem: When I am in an input field, in which I have previously entered one or more values and now would like to enter yet another value, I press the "TAB" button, to see all my previous entries. The list with my previous values appears, but as long as I choose one of them, the whole layout of the form is "changed" or "moved to the right". I made a small video and uploaded it to my google photo account. The problem is shown starting from the 23-rd second:
- Thanks a lot for the video! Could you please try to add autocomplete="off" attribute to inputs?
https://developer.mozilla.org/en-US/doc ... completion

Best Regards,

alexanderdm
Posts: 25
Joined: 02 Mar 2014, 12:26

28 Sep 2022, 06:05

Dear Sirs,

I had a second use-case, in which my placeholder was not shown correctly, even with your style suggestion. Below is your example:

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

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

<!--- .... My code here ... >

<div class="ui-g-12 ui-md-12" style="margin-top:2px; margin-bottom:2px"/>
<div class="ui-g-12 ui-md-6">
<div class="ui-inputgroup">
<span class="ui-inputgroup-addon">
<i class="material-icons">account_circle</i>
</span>
<h:panelGroup styleClass="md-inputfield md-inputfield_marg_top">
<p:inputNumber id="wohnflaecheId" autocomplete="off"
value="#{objektAnlegenBean.home.wohnflaeche}" placeholder="m²" symbol=" m²"
symbolPosition="s"
decimalSeparator=","
thousandSeparator="." binding="#{wohnflaeche}"/>
<p:message for="wohnflaecheId" style="color: red">
<p:autoUpdate/>
</p:message>
<label>Wohnflaeche</label>
</h:panelGroup>
</div>
</div>

The problem is that the separator m² and the label Wohnflaeche are overlapping as long as I click with the mouse on that input field. I do see both of them one above the other!

Please help!

alexanderdm
Posts: 25
Joined: 02 Mar 2014, 12:26

29 Sep 2022, 03:53

Dear Sirs!

I stumbled upon two additional problems when using <p:inputNumber with my Sapphire' s template. I provided a minimal working example and posted my question here:

https://stackoverflow.com/questions/738 ... -the-sapph

P.S: Your suggestion to use additional styles like this:

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

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


did not help me, unfortunately!

mert.sincan
Posts: 5211
Joined: 29 Jun 2013, 12:38

03 Oct 2022, 10:26

Hi @alexanderdm,

Sorry for the delayed response! Unfortunately, I couldn't replicate it. Could you please attach a runnable sample xhtml page for us to replicate?

Best Regards,

alexanderdm
Posts: 25
Joined: 02 Mar 2014, 12:26

07 Oct 2022, 02:26

Dear engineer!

Thank you for your reply. Please find below a minimal, working example:

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

- when you start the application, the second input field (the right one) is of type number and creates the problems

Thank you and kind regards,
Alexander Mintchev

cagatay.civici
Prime
Posts: 18570
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

25 Oct 2022, 08:41

Thank you we'll review and get back to you.

mert.sincan
Posts: 5211
Joined: 29 Jun 2013, 12:38

31 Oct 2022, 11:57

Could you please try;

Code: Select all

..
           <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>
            ...
                           <h:panelGroup styleClass="ui-float-label">
                                <p:inputNumber id="betriebsKostenId" ... />
                                <p:message for="betriebsKostenId" style="color: red">
                                    <p:autoUpdate />
                                </p:message>
                                <label>Betriebskosten (netto), EUR</label>
                            </h:panelGroup>

Post Reply

Return to “Sapphire - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest