Help setting selectOneMenu and inputText with the same size

Post Reply
FkJ
Posts: 171
Joined: 08 Jan 2010, 19:16

18 Aug 2016, 14:00

Hi,

I'm developing a login page based on the Modena layout login page example. Instead if a inputText for the username, I'll need a selectOneMenu.

Problem is that the selectOneMenu is always bigger than the inputText. My guess is that the div.ui-selectonemenu-trigger is not considered when the selectOneMenu width is calculated.

Modena version is 2.1.2.

How can solve it?

Thanks

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

23 Aug 2016, 11:07

I couldn't replicate it. Can you please attach sample html code and screenshot for us to replicate? Which primefaces version are you using?

FkJ
Posts: 171
Joined: 08 Jan 2010, 19:16

06 Sep 2016, 15:49

I'm using PF 6.0.3.

I just replaced email inputText with a selectOneMenu.

Image

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>PrimeFaces Modena</title>
        <ui:insert name="head" />
    </h:head>

    <h:body styleClass="GrayModena Geometry" style="height:auto;">
        
        <div class="Wid90 DispBlock MarAuto MarTopPerc5 TexAlCenter">
            <div class="Wid33 MarAuto WidAutoOnMobile">
                <h:graphicImage name="images/logo-dark.svg" library="modena-layout" style="width:40%; max-width:200px;"/>
                <div class="EmptyBox30"></div>
                <div class="Card ShadowEffect">
                    <div class="EmptyBox20"></div>
                    <div class="Wid100 OvHidden BigTopic Fs30"><i class="icon-security Fs60 DispBlock"></i> Login / Sign Up</div>
                    <div class="EmptyBox30"></div>
                    <div class="Wid100"><p:selectOneMenu placeholder="Email" styleClass="Wid80 TexAlCenter Fs18"/></div>
                    <div class="EmptyBox10"></div>
                    <div class="Wid100"><p:inputText type="password" placeholder="Password" styleClass="Wid80 TexAlCenter Fs18"/></div>
                    <div class="EmptyBox30"></div>
                    <p:selectBooleanCheckbox value="accept" itemLabel="I Accept Terms And Policies"/>
                    <div class="EmptyBox30"></div>
                    <div class="Wid50 Fleft Responsive50"><p:button value="Sign In / Sign Up" icon="fa fa-sign-in" styleClass=" Fs18 White RaisedButton Fright FloatNoneOnMobile" href="dashboard.xhtml"/></div>
                    <div class="EmptyBox5 ShowOnMobile"></div>
                    <div class="Wid50 Fleft Responsive50"><p:button value="Forgot Password ?" icon="fa fa-lock" styleClass="RedButton Fs18 White RaisedButton Fleft FloatNoneOnMobile"/></div>
                    <div class="EmptyBox20"></div>
                    <div class="Separator"></div>
                    <div class="Wid100 OvHidden BigTopic Fs30">Access Permission</div>
                    <div class="Wid100">
                        <div class="Wid100"><p:inputText placeholder="Email" styleClass="Wid80 TexAlCenter Fs18"/></div>
                        <div class="EmptyBox10"></div>
                        <p:button value="Send Access Request" styleClass="PurpleButton Fs18 White RaisedButton"/>
                    </div>
                    <div class="EmptyBox20"></div>
                </div>
                <div class="Wid100 TexAlCenter MarTop20 Fs14 FontRobotoRegular Gray">
                        <i class="fa fa-copyright"></i>  PrimeFaces Modena Theme And Layout <br/> All rights reserved.
                    </div>
            </div>
        </div>
        
        <h:outputStylesheet name="css/core-layout.css" library="modena-layout" />
        <h:outputStylesheet name="css/animate.css" library="modena-layout" />
        <h:outputStylesheet name="css/modena-font.css" library="modena-layout" />
        <h:outputStylesheet name="css/ripple-effect.css" library="modena-layout" />
        <h:outputStylesheet name="css/font-awesome.css" library="modena-layout" />
        <h:outputStylesheet name="css/modena-layout.css" library="modena-layout" />
    </h:body>

</html>

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest