2.2.1 p:caldendar and inputMask - they look strange

[OneCent]

Hi

I have some "problems" with the 2.2.1, i did not have them with 2.2.RC2.

As you can see in the picture, the fields do look strange with 2.2.0 and 2.2.1 . Any Idea where i should look or what i should check?



1) p:calendar

Code: Select all

 <h:outputLabel value="#{i18nBean.getText('Geburtsdatum')}" for="Geburtsdatum"/>
                                    <p:calendar value="#{natuerlichePersonBean.gateway.subject.geburtsdatum}"
                                                locale="de"
                                                showButtonPanel="true"
                                                yearRange="1900"
                                                navigator="true"
                                                effect="fadeIn"
                                                pages="1"
                                                mode="popup"
                                                showOn="button"
                                                pattern="dd.MM.yyyy"
                                                id="Geburtsdatum"/>
                                    <h:outputLabel value=""/>

2) p:inputMask

Code: Select all

<h:outputLabel value="#{i18nBean.getText('SvNummer')}" for="svNummer"/>
                                    <p:inputMask mask="9999999999999"   id="svNummer" value="#{natuerlichePersonBean.gateway.subject.svNummer}"  size="26" />
                                    <h:outputLabel value=""/>

- Screenshot is made on a Mac with Safari
- 2.2.RC2 did not have that problem
- Runs on GF and Mojarra 2.0.4-b09

[bumble.bee]

In 2.2 form control styling was introduced. Unfortunately the calendar and inputmask components don't have an option to be styled or not (they are styled regardless of if you want them to be or not). With the other components like inputText and inputTextarea you have a choice because the PrimeFaces versions mostly only add styling so you can decide to have styled form controls or not by using the PrimeFaces component or using the plain JSF component equivalent (Note: the p:inputTextarea does add an auto expand feature so in that case you have to accept the styling to get it).

Here is the announcement: http://primefaces.prime.com.tr/forum/vi ... f=3&t=7330

In 3.0 form controls are being refined: http://primefaces.prime.com.tr/forum/vi ... f=3&t=7787

[Oleg]

I agree. Calendar, inputMask, spinner, ... all input fields get automatically the CSS selector ui-inputfield. But the documentation doesn't mention this selector at all. I don't want to have e.g. shadow and bold font in input elements and had to write

Code: Select all

.ui-inputfield {
    -moz-box-shadow: none !important;
    font-weight: normal !important;
}

And I want to use "native" h:input, h:select... tags, but it's very hard to design "native" and PF's components (like p:calendar or p:spinner), so that they have an unifed Look&Feel. I have to assign ui-inputfield selector to all "native" components.

I found some other lacks in the docu regarding to CSS selectors (thanks Firebug!). PF has e.g. not documented selectors in theme.css files

Code: Select all

/* PrimeFaces Extensions */
...

.ui-inputfield.ui-state-focus {
    -moz-box-shadow: 0px 0px 5px #74b2e2, inset 0 2px 2px #74b2e2 !important;
    -webkit-box-shadow: 0px 0px 5px #74b2e2, inset 0 2px 2px #74b2e2 !important;
    box-shadow: 0px 0px 5px #74b2e2, inset 0 2px 2px #74b2e2 !important;
}

[MikeK]

I have this issue as well. It looks odd to have my calendar inputs look different than everything else. It would be a great option to turn off Themes for form controls.

[Oleg]

Yes, that's what I meant. My calendar and spinner look different than all other components as well. Created an issue: http://code.google.com/p/primefaces/iss ... il?id=1749

This feature will be handy for all people that don't plan to use p:input, p:textarea, p:select... components, but depend on components not covering by JSF impl. like p:calendar, p:spinner, p:inputMask.

Please vote!

[cagatay.civici]

Just override ui-inputfield to reset how they look, it is a global selector that applies every input field.

[Oleg]

Ok, I'm satisfied, but I would write in theme.css

Code: Select all

.ui-inputfield:focus {
...
}

additional to

Code: Select all

.ui-inputfield.ui-state-focus {
...
}

because we can only set .ui-state-focus by JavaScript. I set now ui-inputfield for all h:... components, but I can not easy adjust all places for .ui-state-focus. Pseudoselector :focus is handled automatically by browser and we would nothing need to do. Can you add :focus please?

For ui-state-hover and :hover is the same.

[Oleg]

Yet another thing. Input elements of p:calendar, p:spinner, p:inputMask get CSS selectorts ui-inputfield ui-widget ui-state-default ui-corner-...

In Safari these fields don't show shadow by hover / focus even I manipulate ui-inputfield. Other h:inputs show shadow by browser standard behavior. The question is now - how to achieve one Look&Feel? Don't matter, with shadow or without, I couldn't do this task succesfully cross-browser.

[kotoshy]

What countries officially use a different calendar than our Gregorian calendar? I think the Gregorian calendar is the most widely accepted "common currency" in our world. Are there countries using other calendars officially, excluding religious time-scale applications of their traditional calendars?
________________________________________
market samurai ~ marketsamurai ~ marketsamurai.com

[bumble.bee]

What countries officially use a different calendar than our Gregorian calendar?

That is off-topic. Start your own thread (probably on a different forum since that question does not have anything to do with PrimeFaces)