InputText with icons

Post Reply
jilles
Posts: 13
Joined: 23 May 2014, 16:21

19 Apr 2017, 23:07

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

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

User avatar
aragorn
Posts: 2600
Joined: 29 Jun 2013, 12:38

20 Apr 2017, 08:17

Can you please attach your test code?

jilles
Posts: 13
Joined: 23 May 2014, 16:21

23 Apr 2017, 06:36

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>

User avatar
aragorn
Posts: 2600
Joined: 29 Jun 2013, 12:38

24 Apr 2017, 09:58

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
Posts: 13
Joined: 23 May 2014, 16:21

12 May 2017, 05:13

Worked

thanks a lot man
:D

User avatar
aragorn
Posts: 2600
Joined: 29 Jun 2013, 12:38

14 May 2017, 17:10

Glad to hear, thanks for the update!

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest