InputText with icons

[jilles]

Hi, using material design from google, usually we have a icon on input text


But when try to use with primefaces, it wont work, as you can see into next image, there is something to do?

[mert.sincan]

Can you please attach your test code?

[jilles]

sure,

Code: Select all

 <div class="card card-w-title">
                    <h1>Dados Básicos</h1>
                    <p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank form-group">

                        <h:panelGroup styleClass="md-inputfield">
                            <i class="fa fa-diamond"></i>
                            <p:inputText id="anuncianteRazaoSocial" size="30" value="#{anuncianteBean.anunciante.razaoSocial}"/>
                            <p:outputLabel for="anuncianteRazaoSocial" value="Razão Social"/>

                        </h:panelGroup>

[mert.sincan]

Ultima doesn't support this feature. But, I overrode some css for this issue. Please try the following code;

Code: Select all

//CSS
<style type="text/css">
        body .md-inputfield.myIconClass i:first-child{
            position: absolute;
            top: 1px;
        }

        body .md-inputfield.myIconClass input {
            margin-left: 25px;
        }

        body .md-inputfield.myIconClass label {
            left: 30px;
        }
 </style>
    
//XHTML
<div class="card card-w-title">
    <h1>Dados Básicos</h1>
    <p:panelGrid columns="1" layout="grid" styleClass="ui-panelgrid-blank form-group">

        <h:panelGroup styleClass="md-inputfield myIconClass">
            <i class="fa fa-diamond"></i>
            <p:inputText id="anuncianteRazaoSocial" size="30" value="#{anuncianteBean.anunciante.razaoSocial}"/>
            <p:outputLabel for="anuncianteRazaoSocial" value="Razão Social"/>
        </h:panelGroup>
    </p:panelGrid>
</div>

You can change the above css style by yourself.

Also, which size are you using? Material or Compact?

[jilles]

Worked

thanks a lot man

[mert.sincan]

Glad to hear, thanks for the update!