is Scrollable Dialog Box Possible?

prime2000 · 03 Nov 2011, 17:14

Hi guys/gals,

Is it possible to have scrollable dialog box.

I have a datatable that displays records and I want to select a row and display that on a dialog or a page...

What is the best way...??

Thanks

P2K

prime2000 · 04 Nov 2011, 22:30

I have resolved my scrollable dialog box issue this way...

I defined my view like this...

viewdata.xhtml

Code: Select all

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

<p:scrollPanel style="width:500px;height:500px" scrollMode="native">  

  <p:panel header="#{yourBean.selected.id}" style="text-align:left">
		
    <h:panelGrid id="panel_display" columns="1" cellpadding="4">

	<h:outputText value="firstname:" style="font-weight:bold" />
	<h:outputText value="#{yourBean.selected.firstname}" />
	<p:separator />

	<h:outputText value="lastname:" style="font-weight:bold" />
	<h:outputText value="#{yourBean.selected.lastname}" />
	<p:separator />


    </h:panelGrid>
	
  </p:panel>  

</p:scrollPanel>

</ui:composition>

In datatable.xhtml

Have a context menu section that will open a dialog

Code: Select all

<p:contextMenu for="data">
   <p:menuitem value="View" update="view_display"
	icon="ui-icon ui-icon-search" oncomplete="dataDialog.show()" />

</p:contextMenu>


.......datatable code..........


<p:dialog header="View Data Detail" widgetVar="dataDialog" resizable="false"
	width="600" height="600" showEffect="clip" hideEffect="fold" closeOnEscape="true">
	
	<ui:include src="viewdata.xhtml" /> 
			
</p:dialog>

That did it...play with the panel size and dialog box size to fit your needs.

Good Luck.

P2K

theleoni · 14 Jan 2015, 22:16

Hi,

I solved this problems overwriting the primefaces.css.

More specifically. Creating another .css with this:

Code: Select all

.ui-datatable-resizable table {
    table-layout: auto!important;
}

Added my new .css;
Change in <f:facet/> the 'name' to 'last'.

Code: Select all

<html>
<f:view contentType="text/html">
        <h:head>
            <link rel="stylesheet" href="estilo-hu.css"/> <!--   HERE THE NEW .CSS  -->
            <f:facet name="last">    <!--     HERE    -->
                <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
                <title>Test</title>
            </f:facet>
        </h:head>
</f:view>
</html>

In 'dialog' and 'dataTable':

Code: Select all

<p:dialog styleClass="notesDialog" header="List" widgetVar="list" modal="true" width="90%" height="500" showEffect="scale" hideEffect="scale" closable="true" closeOnEscape="true" resizable="true" >

        <p:dataTable var="car" value="#{dtScrollView.cars1}" emptyMessage="Não há dados." scrollable="true" scrollHeight="100%" resizableColumns="true" liveResize="true" draggableColumns="true" liveScroll="true">
            <p:column headerText="Id" resizable="true">
                <h:outputText value="#{car.id}" />
            </p:column>
            <p:column headerText="Year" resizable="true">
                <h:outputText value="#{car.year}" />
            </p:column>
            <p:column headerText="Brand" resizable="true">
                <h:outputText value="#{car.brand}" />
            </p:column>
            <p:column headerText="Color" resizable="true">
                <h:outputText value="#{car.color}" />
            </p:column>
        </p:dataTable>
    </p:dialog>

Regards, Guilherme Leoni.

is Scrollable Dialog Box Possible?

Who is online