float label different in demo

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
lbordinhon
Posts: 10
Joined: 03 Feb 2023, 14:41

03 Feb 2023, 14:50

Hello Guys!
I'm doing a form with float label but the css isn't equals the demo. I wish it was the same as the demo.
What can I do? thanks

My Form:
Image

Demo Form:
Image

olgubasak
Posts: 98
Joined: 05 Jan 2023, 11:05

07 Feb 2023, 14:29

Hi,

What is your PrimeFaces and theme version? Could you try again with the latest version?

lbordinhon
Posts: 10
Joined: 03 Feb 2023, 14:41

07 Feb 2023, 15:01

olgubasak wrote:
07 Feb 2023, 14:29
Hi,

What is your PrimeFaces and theme version? Could you try again with the latest version?
Hi, I'm using the latest version

olgubasak
Posts: 98
Joined: 05 Jan 2023, 11:05

07 Feb 2023, 16:02

Hi again,
Could you send me your code so I can try it?

lbordinhon
Posts: 10
Joined: 03 Feb 2023, 14:41

14 Feb 2023, 20:06

olgubasak wrote:
07 Feb 2023, 16:02
Hi again,
Could you send me your code so I can try it?
What the part of code? Is exactly the demo

Login page:

Code: Select all

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
            <meta name="apple-mobile-web-app-capable" content="yes" />
        </f:facet>
        <title>Login - #{systemConfig.systemName}</title>
        <h:outputScript name="js/ripple.js" library="barcelona-layout"/>
        <h:outputScript name="js/layout.js" library="barcelona-layout" />
        
        <h:outputStylesheet name="style.css" library="css" />
        
        	<link rel="shortcut icon" href="#{resource['img/favicon/favicon.ico']}"
		type="image/x-icon" />
        
    </h:head>

    <h:body styleClass="login-body">
    
    <h:form id="form_login" prependId="false">
        
        <div class="login-panel ui-fluid">
            <div class="grid grid-nogutter">
                <div class="col-12 login-header">
                    <h1>LOGIN</h1>
                    <h2>#{systemConfig.systemName}</h2>
                    <p:graphicImage name="images/logo.png" library="barcelona-layout" />
                </div>
                <div class="col-12">
                    <span class="ui-float-label">
                        <p:inputText id="username"/>
                        <p:outputLabel for="@previous" value="Usuário"/>
                    </span>
                </div>
                <div class="col-12">
                    <span class="ui-float-label">
                        <p:password id="password" feedback="false"/>
                        <p:outputLabel for="@previous" value="Senha"/>
                    </span>
                </div>
                      
                       <h:panelGroup class="col-12" rendered="${!empty param['error']}">
                    <span class="ui-float-label">
						<p:staticMessage severity="error" detail="Usuário ou Senha inválidos." style="margin: 0; width: 100%"
						 />
						</span>
						</h:panelGroup>
						
                <div class="col-12 button-container">
                    <p:commandButton id="submit" value="ENTRAR" type="submit" ajax="false" icon="pi pi-user" />
                </div>
            </div>
        </div>

        <h:outputStylesheet name="css/primeicons.css" library="barcelona-layout"/>
        <h:outputStylesheet name="css/primeflex.min.css" library="barcelona-layout"/>
        <h:outputStylesheet name="css/ripple.css" library="barcelona-layout"/>
        <h:outputStylesheet name="css/layout-blue.css" library="barcelona-layout" />
        <h:outputStylesheet name="css/ripple.css" library="barcelona-layout" />
        
        </h:form>
    </h:body>

</html>

olgubasak
Posts: 98
Joined: 05 Jan 2023, 11:05

15 Feb 2023, 10:33

Hi,

I checked your code and everything seems fine. There is a difference between the float label example in the showcase and the one in the Barcelona theme, so if you use it in the Barcelona theme, you can achieve the same result.

lbordinhon
Posts: 10
Joined: 03 Feb 2023, 14:41

15 Feb 2023, 22:09

olgubasak wrote:
15 Feb 2023, 10:33
Hi,

I checked your code and everything seems fine. There is a difference between the float label example in the showcase and the one in the Barcelona theme, so if you use it in the Barcelona theme, you can achieve the same result.
I didn't install theme just layout... now is works perfectly. It was very helpful.
Thanks so much!

olgubasak
Posts: 98
Joined: 05 Jan 2023, 11:05

16 Feb 2023, 09:11

Thank you for the update. You're welcome.

Post Reply

Return to “Barcelona - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests