dialog does not position in center

ali.hocaoglu · 26 Feb 2015, 18:53

JSF 2.2
Primefaces 5.0
JBoss EAP 6.1

In the center layout of my page, I have a dialog and a datatable as shown below.

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head> </h:head>
    <h:body>

        <ui:composition template="/templates/admin_template.xhtml">           
            <ui:define name="center">  
                <ui:include src="../resources/viskon_components/events/dialog_edit_event.xhtml"/> 
                <h:form id="eventFrom" onkeypress="if (event.keyCode == 13) {
                return false;}"> 
                    <p:messages id="eventListMessages" autoUpdate="true" showDetail="true" />
                    <ui:include src="../resources/viskon_components/events/datatable_event_list.xhtml"/>  
                </h:form>
            </ui:define>

        </ui:composition>
    </h:body>
</html>

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"> 
 
		 <p:dialog modal="true" width='75%' 
					  height="75%"
					  dynamic="true" 
					  draggable="true" 
					  resizable="true"
					  widgetVar="editEventDlgWidget" 
					  id="editEventDlg" 
					  appendTo="@(body)"
					  header="#{listEventsBean.editDialogHeader}"
					  visible="#{listEventsBean.editDialogVisible}"
					  position='center,center'
					  >  
					  <p:ajax event="close" listener="#{listEventsBean.setEditDialogVisible(false)}"/>
					  <h:form id="editEventForm">
							<h:panelGrid id="editEventInfoPGrid" columns="2"> 
								<p:outputLabel value="#{msg['event.list.dialog.editEventDlgWidget.description']}" />
								<p:editor value="#{editEventBean.eventModel.description}"
								  id="eventdescription"
								  widgetVar="eventDescriptionWidget"
								  controls="bold italic 
								  underline strikethrough subscript 
								  superscript | font size style | 
								  color highlight removeformat | 
								  bullets numbering | outdent
								  indent | alignleft center alignright
								  justify | undo redo | rule link
								  unlink | cut copy paste pastetext"
								  maxlength="500"
								  />
							</h:panelGrid>  
					   </h:form>
		</p:dialog>
</html>

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:vcs="http://java.sun.com/jsf/composite/viskon_components">

    <p:dataTable id="eventList" emptyMessage="#{msg['Datatable.NoRecordsFound']}"
                 widgetVar="eventsTableWidget"
                 var="eventelem"
                 value="#{listEventsBean.events}" 
                 lazy="true" 
                 selection="#{listEventsBean.selectedEvent}"
                 rowKey="#{eventelem.eventId}" paginator="true"
                 paginatorTemplate="{CurrentPageReport} {FirstPageLink}
                 {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}
                 {RowsPerPageDropdown}"
                 currentPageReportTemplate="(#{msg['datatable.entries']} {startRecord} - {endRecord}
                 of {totalRecords}, #{msg['datatable.page']} {currentPage} / {totalPages})"
                 paginatorAlwaysVisible="true" 
                 paginatorPosition="bottom"
                 rows="10" 
                 rowsPerPageTemplate="10,25,50"                                 
                 filteredValue="#{listEventsBean.filteredEvents}">        
        
        <f:facet name="header" >
            <p:outputLabel style="margin-top:0;font-size: 18px !important" 
                           value="#{msg['event.list.dataTable.eventList.header']}"
                           rendered = "#{listEventsBean.selectionMode}" />
            <p:toolbar id="eventListHeaderToolbar">  
                <f:facet name="left">
                    <p:commandButton id="newEventToolbarBtn"
                                     value="#{msg['event.list.dataTable.eventList.eventListHeaderToolbar.cmdButtonNew']}"
                                     icon="ui-icon-document"
                                     disabled="#{not userBean.user.role.auth.createEvent}"
                                     oncomplete="PF('editEventDlgWidget').show()"
                                     actionListener="#{listEventsBean.initializeEditEventDialog}" 
                                     update=":#{p:component('editEventDlg')}"
                                     process="@this"/>  

                </f:facet>

            </p:toolbar>
        </f:facet>    

        <p:column headerText="#{msg['event.list.dataTable.eventList.column.actions']}"
                  exportable="false">
        
            <p:commandButton id="editBtn"
                             actionListener="#{listEventsBean.doEditEventFromDialog(eventelem)}"
                             title="#{msg['event.list.dataTable.eventList.column.actions.cmdButtonEdit']}"
                             update=":#{p:component('editEventDlg')}"
                             oncomplete="PF('editEventDlgWidget').show()"
                             icon="ui-icon-pencil"
                             disabled="#{listEventsBean.selectionMode or
                                         not userBean.user.role.auth.updateEvent}"/>        

        </p:column>
    </p:dataTable>  
</html>

In Chrome, dialog is appended to the datatable in the page, scrollbar appeared. When I clicked commandButton to open dialog, it caused the dialog to open at a position where user can see the dialog after scrolling. So, I set "display:none" for ui-dialog, but this caused p:editor to not display.

Code: Select all


.ui-dialog,.ui-dialog *
{
    box-sizing: content-box !important;
} 

.ui-dialog{
    display: none;
}


.ui-editor
{
    width: 400px !important; 
    height: 250px !important;
    box-shadow: inset 0 2px 2px #8f8f8f !important;
    padding: 4px !important;

}

So, I put setVisible(true) for dialog in my Bean function which is called when I click commandButton on datatable to open dialog and I put setVisible(false) in my dialog's close event. However, p:editor caused a problem. When dialog is initializing, editor's size is small, but then its height increases. As a result, dialog's height increases. Finally, my dialog is not centered.

ali.hocaoglu · 27 Feb 2015, 14:34

I resolved the problem. Instead of using

Code: Select all

.ui-dialog{
    display: none;
}

in css file. I formed a css class as follows:

Code: Select all

.dialogDisplayNone .ui-dialog{
    display: none;
}

Finally, I assigned this css class as "styleClass" to the dialog.

ali.hocaoglu · 27 Feb 2015, 15:55

I somehow discovered that dialog is again appending to the page layout. After opening the dialog, scrollbars disappear and dialog does not append to the page layout.

ali.hocaoglu · 02 Mar 2015, 10:06

Finally, I resolved the problem

. Following code must be deleted from css

Code: Select all

.ui-dialog{
    display: none;
}

Instead, this code must be added to css.

Code: Select all

.ui-dialog
{
     position: absolute !important;
}

dialog does not position in center

Who is online