<p:dialog> not draggable

UI Components for JSF
Post Reply
User avatar
michiel
Posts: 240
Joined: 07 Jun 2010, 09:12
Location: Belgium

09 Jun 2010, 11:19

I have a page with 2 <p:dialog>' s,
one (editTaak) is not draggable, but it should be,
I can't find the reason why it's not, everything else is working as expected.

geplandeTaken.xhtml (this one is draggable)

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
    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.prime.com.tr/ui">
    <p:dialog id="geplandeTakenWindow"
              modal="true"
              width="400px"
              fixedCenter="true"
              widgetVar="dialog_gT"
              header="Taak Gegevens">

      <h:form id="planning">
          <h:panelGroup id="geplandWindow" rendered="#{taakBean.aantalGeplandeTaken gt 0}">
              <div>
                  <h5><h:outputText value="#{msg.agenda_geplandeTaken_Titel}" /></h5>
              </div>
              <h:panelGrid columns="1" styleClass="padding_top20" >
                  <ui:repeat value="#{taakBean.geplandeTaken}" var="geplandeTaak">
                      <ul>
                      <li>
                        <h:outputText value="#{geplandeTaak.taak}"/>
                      </li>
                    </ul>
                  </ui:repeat>
              </h:panelGrid>

              <!-- BUTTONS -->
              <div class="buttons padding_top20" style="display:block;">
                  <p:commandLink type="button" update="@none"
                            oncomplete="dialog_gT.hide(); return false;"
                            actionListener="#{taakBean.updateSessie}">
                      <h:graphicImage id="teystTaak" url="/images/buttons/close.png" />
                      <h:outputText value="#{msg.agenda_geplandeTaken_button}" />
                  </p:commandLink>
              </div>
          </h:panelGroup>
      </h:form>
    </p:dialog>
</ui:composition>
editTaak.xhtml (this one isn't)

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
    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.prime.com.tr/ui">
    <p:dialog id="taakWindow"
              modal="true"
              width="440px"
              fixedCenter="true"
              widgetVar="dialog_tW"
              header="Taak Gegevens">

        <h:form id="taakForm" rendered="#{taakBean.rendered}">
            <h:panelGroup>
                <div>
                    <h5><h:outputText value="#{msg.agenda_taak_label}" /></h5>
                    <h:inputText id="taakNaam" value="#{taakBean.editTaak.taak}" styleClass="full_width" >
                        <p:focus for="taakNaam"/>
                    </h:inputText>
                </div>
                <h:panelGrid columns="2" styleClass="padding_top20" >
                    <h:panelGroup><h5><h:outputText value="#{msg.agenda_taak_alarm_datum}"/></h5></h:panelGroup>
                    <h:panelGroup><h5><h:outputText value="#{msg.agenda_taak_datum}"/></h5></h:panelGroup>
                    <p:calendar id="alarmDatum"
                                pattern="dd/MM/yyyy"
                                value="#{taakBean.editTaak.alarmDatum}"
                            />
                    <p:calendar id="Datum"
                                pattern="dd/MM/yyyy"
                                value="#{taakBean.editTaak.datum}"/>
                </h:panelGrid>
                <div class="padding_top20">
                    <h5><h:outputText value="#{msg.agenda_taak_prioriteit}" /></h5>
                    <h:selectOneMenu
                            id="prioriteiten"
                            value="#{taakBean.editTaak.prioriteit}">
                        <f:selectItems value="#{taakBean.prioriteiten}"/>
                    </h:selectOneMenu>
                </div>
                <div class="padding_top20">
                    <h5><h:outputText value="#{msg.agenda_taak_omschrijving}" /></h5>
                    <h:inputTextarea id="taakOmschrijving" value="#{taakBean.editTaak.omschrijving}" rows="6" styleClass="full_width" />
                </div>

                <!-- BUTTONS -->
                <div class="buttons padding_top20" style="display:block;">
                    <p:commandLink update="agendaForm growl"
                                   process="taakForm"
                                   actionListener="#{taakBean.saveTaak}"
                                   onsuccess="dialog_tW.hide(); return false;">
                        <h:graphicImage id="addTaak" url="/images/buttons/addTaak.png" />
                        <h:outputText value="#{msg.agenda_taak_addTaak}" />
                    </p:commandLink>
                    <p:commandLink update="agendaForm"
                                   actionListener="#{taakBean.unrender}"
                                   process="@none"
                                   oncomplete="dialog_tW.hide(); return false;">
                        <h:graphicImage id="cancelTaak" url="/images/buttons/cancelTaak.png" />
                        <h:outputText value="#{msg.agenda_taak_cancelTaak}" />
                    </p:commandLink>
                </div>
            </h:panelGroup>
        </h:form>
    </p:dialog>
</ui:composition>
app.xhtml (the page where the include is defined)

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
    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.prime.com.tr/ui"
    template="../template/appLayout.xhtml">
    <ui:define name="windowTitle">
        CAW Client - agenda
    </ui:define>
    <ui:define name="content">
        <ui:include src="./agenda/editTaak.xhtml"/>
        <ui:include src="./agenda/geplandeTaken.xhtml"/>
        <ui:include src="./agenda/agenda.xhtml" />
    </ui:define>
</ui:composition>
appLayout.xhtml (the template file)

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
        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.prime.com.tr/ui">
<h:head>
      <title>
          <ui:insert name="windowTitle">
              CAW Client
          </ui:insert>
      </title>    
    <link rel="shortcut icon" href="../images/icons/favicon.ico"/>
    <link rel="icon" href="../images/icons/favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="../images/icons/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/my_layout.css" type="text/css"/>
    <!--[if lt IE 7]>
        <link rel="stylesheet" href="./css/patches/patch_my_layout.css" type="text/css" media="screen,projection"/>
    <![endif]-->
    <ui:insert name="head"></ui:insert>
    <script type="text/javascript">
        function showGeplandeTaken() {
            if(document.getElementById('planning:geplandWindow')){
                dialog_gT.show();
            }
        }
    </script>
   </h:head>

   <h:body onload="showGeplandeTaken();">
       <p:growl id="growl" showDetail="true" life="3000"/>

       <div class="page_margins">
           <div id="border-top">
               <div id="edge-tl"></div>
               <div id="edge-tr"></div>
           </div>
           <div class="page">
               <!-- begin: #header -->
               <div id="header" style="position:relative;">
                   <ui:insert name="header">
                       <ui:include src="../template/header.xhtml" />
                   </ui:insert>
               </div>
               <!-- end : #header -->

               <!-- begin: #main -->
               <div id="main">

                   <!-- begin: #menu -->
                   <div id="col1">
                       <div id="col1_content" class="clearfix">
                           <ui:insert name="menu">
                               <ui:include src="../app/menu/menu.xhtml"/>
                           </ui:insert>
                       </div>
                   </div>
                   <!-- end: #menu-->

                   <!-- begin: #content -->
                   <div id="col3">
                       <div id="col3_content" class="clearfix">
                           <ui:insert name="content">
                                <ui:include src="../app/agenda/agenda.xhtml"/>
                            </ui:insert>
                           <div class="padding_top20">
                               &nbsp;
                           </div>
                       </div>
                       <!-- IE Column Clearing -->
                       <div id="ie_clearing"> &#160; </div>
                   </div>
                   <!-- end: #content -->

               </div>
               <!-- end: #main -->

               <!-- begin: #footer -->
               <ui:insert name="footer">
                   <ui:include src="../template/footer.xhtml"/>
               </ui:insert>
               <!-- end: #footer -->
           </div>
           <div id="border-bottom">
               <div id="edge-bl"></div>
               <div id="edge-br"></div>
           </div>
           <ui:debug hotkey="d" rendered="true"/>
       </div>
   </h:body>
</html>
agenda.xhtml (also include in the page)

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
    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.prime.com.tr/ui">
    
    <h:panelGroup>
        <h2>Agenda</h2>
        <h:form id="agendaForm">
        <div class="buttons">
            <p:commandLink id="buttonAdd" actionListener="#{taakBean.nieuweTaak}"
                    update="taakWindow" async="true" immediate="true"
                    oncomplete="dialog_tW.show()">
                <h:graphicImage id="nieuweTaak" url="/images/buttons/add.png"/>
                <h:outputText value="#{msg.agenda_button_nieuw}"/>
            </p:commandLink>

            <p:commandLink id="buttonEdit" rendered="#{taakBean.rendered}"
                    update="taakWindow" oncomplete="dialog_tW.show()">
                <h:graphicImage id="editTaak" url="/images/buttons/edit.png"/>
                <h:outputText value="#{msg.agenda_button_edit}"/>
            </p:commandLink>

            <p:commandLink id="buttonDelete" rendered="#{taakBean.rendered}"
                    update="growl agendaForm" actionListener="#{taakBean.deleteTaak}">
                <h:graphicImage id="deleteTaak" url="/images/buttons/delete.png"/>
                <h:outputText value="#{msg.agenda_button_delete}"/>
            </p:commandLink>
        </div>

        <div class="padding_top20">
            <p:dataTable id="agenda" var="taak" value="#{taakBean.taken}"
                         style="width:100%; line-height:30px;"
                         selection="#{taakBean.selectedTaak}" selectionMode="single"
                         update="growl agendaForm">
                <p:column width="70" resizable="true" >
                    <f:facet name="header">
                        <h:outputText value="#{msg.agenda_taakVoltooid}" />
                    </f:facet>
                    <p:commandLink actionListener="#{taakBean.updateVoltooid}" update="growl @form">
                        <h:graphicImage url="/images/agenda/voltooid/selected.png" rendered="#{taak.volbracht}"/>
                        <h:graphicImage url="/images/agenda/voltooid/unselected.png" rendered="#{not taak.volbracht}"/>
                    </p:commandLink>
                </p:column>
                <p:column resizable="true" sortBy="#{taak.taak}">
                    <f:facet name="header">
                        <h:outputText value="#{msg.agenda_taak}"/>
                    </f:facet>
                    <h:outputText value="#{taak.taak}"/>
                </p:column>
                <p:column width="70" resizable="true" >
                    <f:facet name="header">
                        <h:outputText value="#{msg.agenda_taakPrioriteit}" />
                    </f:facet>
                    <h:graphicImage url="/images/agenda/prioriteit/#{taak.prioriteit.prioriteit}.png" width="16px" height="16px"/>
                </p:column>
                <p:column width="70" resizable="true" >
                    <f:facet name="header">
                        <h:outputText value="#{msg.agenda_taakAlarm}" />
                    </f:facet>
                    <h:graphicImage url="/images/agenda/alarmDate.png" rendered="#{taakBean.alarm}" width="16px" height="16px"/>
                </p:column>
                <p:column width="150" resizable="true" >
                    <f:facet name="header">
                        <h:outputText value="#{msg.agenda_taakDatum}" />
                    </f:facet>
                    <h:outputText value="#{taakBean.date}"/>
                </p:column>
            </p:dataTable>
        </div>
        </h:form>
    </h:panelGroup>
</ui:composition>
my_layout.css (most important for the masks z-index)

Code: Select all

/**
 * my_layout.css
 */
@charset "UTF-8";
/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
 * (en) central stylesheet
 * (de) zentrales Stylesheet
 *
 * @creator       YAML Builder V1.2 (http://builder.yaml.de)
 * @file          my_layout.css
 * @-yaml-minver  3.2
 *
 */

/* import core styles | Basis-Stylesheets einbinden */
@import url(../yaml/core/base.css);

/* import screen layout | Screen-Layout einbinden */

@import url(../yaml/screen/basemod.css);
@import url(../yaml/screen/content.css);

/* import print layout | Druck-Layout einbinden */
@import url(../yaml/print/print_draft.css);

.yui-skin-sam .mask {
    background-color: #f9f9f9;
    opacity: .50;
    z-index: 2 !important;
}

.splitter_rollover {
    background-color: #a4aec5;
}

.prompt_focus {
    outline: #f93 solid thin;
}

.padding_top {
    /*padding: 5px 0 10px;*/
    padding: 5px 0 0;
}

.padding_top20 {
    padding: 20px 0 0;
}

.padding_left {
    padding: 0 0 0 10px;
}

.full_width {
    width: 100%;
}

/* BUTTONS */

.buttons{
    height:30px;
}

.buttons a, .buttons input, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color: #efefef;
    border:1px solid #dedede;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

/* STANDARD */

button:hover, .buttons a:hover, buttons input:hover {
    background-color:#dff4ff ;
    border:1px solid #c2e1ef;
    color:#336699;
}

.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative{
    color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.buttons a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}

/* DISABLED */
button[disabled="disabled"], button[disabled]:active, button[disabled]{
    background-color:#f5f5f5;
    border: 1px solid ButtonFace;
    color: GrayText;
    cursor: inherit;
}
Any hints appreciated,
thanks in advance ;)
JSF-2.0, mojarra-2.0.2-FCS and PrimeFaces-2.1 on GlassFish v3.0.1 (build 22)
Top
Post Reply

Return to “PrimeFaces”

  • Information

  • Who is online

    Users browsing this forum: No registered users and 28 guests