Material design text fields

[ingMainardi]

Hello Ultima maintainers,
since I need to create a new project I decided to use the last version of ultima library (4.1.0) primefaces (11.0.0).
I have a question about material design: is it still relevant in Ultima?
For example: text fields. I can use "Float Labels" without problems but I cannot display material design error messages (<p:message ... />) any more.
Am I missing something?

Code and examples

Ultima 2.1.1 and Primefaces 8.0.0 - material text field
Everything follows Material Design guidelines https://material.io/components/text-fields

Code: Select all

<h:panelGroup styleClass="md-inputfield">
    <p:inputText id="name" value="#{personPresenter.person.name}" />
    <p:outputLabel for="name" value="#{msg['person.person.name']}" />
    <p:message for="name" />
</h:panelGroup>

Ultima 4.1.0 and Primefaces 11.0.0 - not material text field
Following updated Ultima guidelines https://www.primefaces.org/ultima/floatlabel.xhtml error message is displayed wrongly

Code: Select all

<div class="p-field ui-float-label ui-input-filled">
    <p:inputText id="mail" type="email" value="#{resetPasswordRequestPresenter.mail}" />
    <p:outputLabel for="mail" value="#{msg['resetPassword.request.username']}" />
    <p:message for="mail" />
</div>

Ultima 4.1.0 and Primefaces 11.0.0 - not so material text field
Tweaking message I can display a quite-material-design-error-text-field

Code: Select all

<div class="p-field ui-float-label ui-input-filled">
    <p:inputText id="mail" type="email" value="#{resetPasswordRequestPresenter.mail}" />
    <p:outputLabel for="mail" value="#{msg['resetPassword.request.username']}" />
    <small class="ui-state-error"><h:message for="mail" /></small>
</div>

Is there a CSS I can add or modify in order to obtain (good old) material design text field?

Thanks

Davide

[mert.sincan]

Hi,

Please try;

Code: Select all

<style>
            body .ui-message.ui-helper-message {
                margin: 0;
                background-color: transparent;
                font-size: smaller;
                padding-top: 0;
                padding-bottom: 0;
            }

            body.ui-input-filled .ui-float-label input ~ label.ui-state-error {
                color: #B71C1C;
            }
        </style>
        <div class="p-grid">
            <div class="p-col-12">
                <div class="card">
                    <h:form>
                        <div class="p-field">
                            <span class="ui-float-label ui-input-filled">
                                <p:inputText id="name" required="true" />
                                <p:outputLabel for="name" value="Name" />
                            </span>
                            <p:message for="name" styleClass="ui-helper-message" />
                        </div>
                        <p:commandButton value="Submit" update="@form"></p:commandButton>
                    </h:form>
                </div>
            </div>
        </div>

Best Regards,

[ingMainardi]

Hello mert.sincan,
I implemented your snipped and it works like a charm!
It works with and without ui-input-filled.

For future Ultima versions it would be awesome if it will be included by design; maybe linked to ui-float-label.
For example:

Code: Select all

<div class="p-field">
    <span class="ui-float-label">
        <p:inputText id="name" required="true" />
        <p:outputLabel for="name" value="Name" />
    </span>
    <p:message for="name" />
</div>

or maybe

Code: Select all

<div class="p-field">
    <span class="ui-float-label">
        <p:inputText id="name" required="true" />
        <p:outputLabel for="name" value="Name" />
        <p:message for="name" />
    </span>
</div>

If is it impossibile or very time consuming do not worry. I added your CSS to SASS overrides, so it is already future proof.

Thank you very much for your work.

Davide

[mert.sincan]

Thanks a lot for the update! I'll talk about this topic with PrimeFaces team

Best Regards,