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
Help setting selectOneMenu and inputText with the same size
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I couldn't replicate it. Can you please attach sample html code and screenshot for us to replicate? Which primefaces version are you using?
Github Profile: https://github.com/mertsincan
I'm using PF 6.0.3.
I just replaced email inputText with a selectOneMenu.
I just replaced email inputText with a selectOneMenu.
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>
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest