scrollPanel is not responsive

xhavi · 21 Dec 2015, 22:37

With the following code the scrollPanel doesn't resize when I change the browser size (it does if I refresh the browser after resizing )
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>

With the following code I have the behavior that I want but not the look

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>

how can I get the look and behavior that I want? Is it a bug of scrollPanel?
I'm using:
Primefaces 5.3
Volt 2.0.1
Glassfish 4.1.1

22 Dec 2015, 11:09

ScrollPanel has not responsive feature. So, this issue is a PrimeFaces core issue. Please create a Github Issue.(https://github.com/primefaces/primefaces/issues)
I created a workaround for you. Please try with;

Code: Select all

.ui-scrollpanel-content {
    padding-left: 0px !important;
    right: 13px;
}

.ui-scrollpanel {
    width: 100% !important;
}

.ui-scrollpanel-container,
.ui-scrollpanel-content {
    width: auto !important;
}

22 Dec 2015, 11:38

Also, I think you can add this js code;

Code: Select all

// JS Code
$(window).load(function() {
   var scrollPanel = PF('scroll');
   if(scrollPanel) {
        $(window).resize(function(){
            PF('scroll').redraw();
        });
   }
});

//ScrollPanel
...
<p:scrollPanel widgetVar="scroll" ...>
...

scrollPanel is not responsive

Who is online