With this code I get the look that I want (custom scroll) but not the behavior
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 Volt</title>
<ui:insert name="head" />
</h:head>
<h:body styleClass="BlueBody">
<div class="Container100">
<div class="Container100">
<div class="Wid50 OvHidden DispBlock MarAuto WidAutoOnMobile" style="margin-top:7%;">
<div class="Card ShadowEffect">
<div class="Container20 TexAlCenter Responsive20">
<div class="EmptyBox10"></div>
<h:graphicImage name="images/logo.svg" styleClass="Wid80" library="volt-layout" style="max-width:200px;"/>
</div>
<div class="Container80 Responsive80">
<div class="Card OrangeBack White TexAlCenter Fs20 FontVoltBold">Inicio</div>
</div>
<div class="Container40 Responsive100">
<div class="Card TexAlCenter">
<p:inputText styleClass="Wid90" placeholder="E-Mail"/>
<div class="EmptyBox10"></div>
<p:password styleClass="Wid90" placeholder="Password"/>
<div class="Separator"></div>
<p:button value="Entrar" icon="fa fa-unlock" styleClass="GreenButton" href="dashboard.xhtml"/>
<span class="Fs14"><p:link value="Cambiar Password"/></span>
</div>
</div>
<div class="Container60 Responsive100">
<p:scrollPanel class="Wid100 Responsive100 HeiAutoOnMobile" style="height: 250px" >
<p:panel id="basic" header="Basic" footer="Movie Details" style="margin-bottom:20px">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText value="The story begins as Don Vito Corleone..The story begins as Don Vito Corleone... The story begins as Don Vito Corleone...The story begins as Don Vito Corleone... The story begins as Don Vito Corleone... The story begins as Don Vito Corleone...." />
</h:panelGrid>
</p:panel>
<p:panel id="basic" header="Basic" footer="Movie Details" style="margin-bottom:20px">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText value="The story begins as Don Vito Corleone..The story begins as Don Vito Corleone... The story begins as Don Vito Corleone...The story begins as Don Vito Corleone... The story begins as Don Vito Corleone... The story begins as Don Vito Corleone...." />
</h:panelGrid>
</p:panel>
</p:scrollPanel>
<div class="Separator"></div>
</div>
</div>
</div>
</div>
</div>
<h:outputStylesheet name="css/core-layout.css" library="volt-layout" />
<h:outputStylesheet name="css/animate.css" library="volt-layout" />
<h:outputStylesheet name="css/volt-font.css" library="volt-layout" />
<h:outputStylesheet name="css/font-awesome.css" library="volt-layout" />
<h:outputStylesheet name="css/volt-layout.css" library="volt-layout" />
</h:body>
</html>
Code: Select all
<p:panel class="Wid100 Responsive100 HeiAutoOnMobile OvYScroll" style="height: 250px" >
<p:panel id="basic" header="Basic" footer="Movie Details" style="margin-bottom:20px">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText value="The story begins as Don Vito Corleone..The story begins as Don Vito Corleone... The story begins as Don Vito Corleone...The story begins as Don Vito Corleone... The story begins as Don Vito Corleone... The story begins as Don Vito Corleone...." />
</h:panelGrid>
</p:panel>
<p:panel id="basic" header="Basic" footer="Movie Details" style="margin-bottom:20px">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText value="The story begins as Don Vito Corleone..The story begins as Don Vito Corleone... The story begins as Don Vito Corleone...The story begins as Don Vito Corleone... The story begins as Don Vito Corleone... The story begins as Don Vito Corleone...." />
</h:panelGrid>
</p:panel>
</p:panel>
I'm using:
Primefaces 5.3
Volt 2.0.1
Glassfish 4.1.1