8 Replies Latest reply on Jun 20, 2017 3:24 AM by Thierry FOTSO NONO

    richfaces calendar in a popup in chrome

    Thierry FOTSO NONO Newbie

      Hi

      I trying to add calendar component in a popup but  only the input and icon are displayed. If I click on the icon to display the calendar it does not allow to select date

      When I add the calendar in a simple page everything working fine.

      Thanks in advance

        • 1. Re: richfaces calendar in a popup in chrome
          Michal Petrov Master

          You need to change the z-index of .rf-cal-popup (put it above 100).

          • 2. Re: richfaces calendar in a popup in chrome
            Thierry FOTSO NONO Newbie

            Thanks Petrov

            I tried your solution, but it does not work, here is the code of the page I m using:

            <?xml version="1.0" encoding="UTF-8"?>

            <ui:composition xmlns="http://www.w3.org/1999/xhtml"

              xmlns:rich="http://richfaces.org/rich"

              xmlns:ui="http://java.sun.com/jsf/facelets"

              xmlns:f="http://java.sun.com/jsf/core"

              xmlns:a4j="http://richfaces.org/a4j"

              xmlns:h="http://java.sun.com/jsf/html"

              xmlns:a="http://xmlns.jcp.org/jsf/passthrough"

              xmlns:p="http://primefaces.org/ui">

             

             

              <h:outputStylesheet>

                .top {

                    vertical-align: top;

                }

             

             

                .info {

                    height: 202px;

                    overflow: auto;

                }

              .ecol1 {

              vertical-align: top;

              padding-right: 25px

              }

             

              .ecol2 {

              vertical-align: top;

              border-left: #ACBECE 1px solid;

              padding-left: 10px

              }

             

              .rich-calendar-tool-btn {

              font-family: Arial, Verdana;

              }

             

              .rf-cal-popup {

              z-index: 200;

              }

                </h:outputStylesheet>

             

             

              <!-- POPUP MODIFIER Experience -->

             

             

              <rich:popupPanel modale="true" width="900" height="500"

              id="modifier_exp">

             

             

              <f:facet name="header">

              <h4 class="modal-title">Modifier expérience</h4>

              <span></span>

              </f:facet>

             

             

              <f:facet name="controls">

              <h:outputLink value="close"

              onclick="#{rich:component('modifier_exp')}.hide(); return false;">

                                X

                            </h:outputLink>

              </f:facet>

              <h:form>

              <h:panelGroup id="edit_modifier_exp">

              <div class="modal-body">

              <div class="row margin-tops1em">

              <div class="form-group required">

              <div class="col-md-2 col-sm-3 col-xs-12">

              <label class="control-label">Entreprise </label>

              </div>

             

             

              <div class="col-md-9 col-sm-9 col-xs-12">

              <h:inputText id="nameExp"

              class="input-md  textinput form-control"

              a:placeholder="Nom de l'entreprise"

              value="#{controller.currentAjoutexpView.nomEntreprise}" />

              </div>

              </div>

              </div>

              <div class="row margin-tops1em">

              <div class="form-group required">

              <div class="col-md-2 col-sm-3 col-xs-12">

              <label class="control-label">Titre du poste :</label>

              </div>

              <div class="col-md-9 col-sm-9 col-xs-12">

              <h:inputText id="titreExp"

              class="input-md  textinput form-control"

              a:placeholder="Titre du poste"

              value="#{controller.currentAjoutexpView.titrePoste}" />

              </div>

              </div>

              </div>

              <div class="row margin-tops1em">

              <div class="col-md-2 col-sm-3 col-xs-12">

              <label class="control-label">Pays :</label>

              </div>

              <div class="col-md-9 col-sm-9 col-xs-12">

              <h:selectOneMenu id="paysExp" class="form-control input-md"

              tabindex="6" value="#{controller.currentAjoutexpView.pays}">

              <f:selectItem itemLabel="Votre Pays" itemValue="null" />

              <f:selectItems

              value="#{controller.profileEtudiantModule.listItemPays}" />

              </h:selectOneMenu>

              </div>

              </div>

              <div class="row margin-tops1em">

              <div class="form-group required">

              <div class="col-md-2 col-sm-3 col-xs-12">

              <label class="control-label requiredField"> Lieu :</label>

              </div>

              <div class="col-md-9 col-sm-9 col-xs-12">

              <h:inputText id="lieuExp"

              class="input-md  textinput form-control" a:placeholder="Lieu"

              value="#{controller.currentAjoutexpView.lieu}" />

              </div>

              </div>

              </div>

              <div class="row margin-tops1em">

              <div class="form-group required">

              <div class="col-md-2 col-sm-3 col-xs-12">

              <label class="control-label">Description:</label>

              </div>

              <div class="col-md-9 col-sm-9 col-xs-12">

              <h:inputTextarea id="descriptionExp"

              value="#{controller.currentAjoutexpView.description}"

              class="form-control" name="Description"

              a:placeholder="Description de l'experience" required="true"></h:inputTextarea>

              </div>

              </div>

              </div>

              <div class="row margin-tops1em">

              <div class="form-group">

              <div class="col-md-3 col-sm-3 col-xs-12">

              <label class="control-label">Période :</label>

              </div>

              <div class="col-md-3 col-sm-7 col-xs-12">

              <rich:calendar value="#{calendarBean.startingDate}"

              locale="#{calendarBean.locale}" popup="#{calendarBean.popup}"

              datePattern="#{calendarBean.pattern}"

              showApplyButton="#{calendarBean.showApply}" cellWidth="24px"

              cellHeight="22px" style="width:200px" />

              <h:inputText id="dateDebExp"

              value="#{controller.currentAjoutexpView.dateDebut}"

              a:placeholder="jj/mm/aaaa" size="10" maxlength="10"

              validator="#{controller.validate}" class="form-control">

              </h:inputText>

              </div>

              <div class="col-md-1 col-sm-2 col-xs-1">

              <label class="control-label"> au: </label>

              </div>

              <div class="col-md-3 col-sm-7 col-xs-11">

              <h:inputText id="dateFinExp"

              value="#{controller.currentAjoutexpView.dateFin}"

              a:placeholder="jj/mm/aaaa" size="10" maxlength="10"

              validator="#{controller.validate}" class="form-control">

              </h:inputText>

              </div>

              </div>

              </div>

              </div>

              </h:panelGroup>

              <div class="modal-footer">

             

             

              <!-- BOUTON VALIDER -->

              <a4j:commandButton id="validate-modif-exp" value="Enregistrer"

              class="btn btn-success" ajaxSingle="true" status="ajaxStatusLong"

              action="#{controller.validerMiseAJourExperience}"

              execute="modifier_exp"

              oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('modifier_exp')}.hide();}" />

             

             

              <!-- BOUTON ANNULER -->

              <a4j:commandButton id="cancel-modifier_exp" value="Annuler"

              title="Annuler" class="btn btn-default"

              onclick="#{rich:component('modifier_exp')}.hide(); return false;" />

             

             

              </div>

              </h:form>

              </rich:popupPanel>

             

             

            </ui:composition>

             

             

            I tried many value but nothing change, but on Firefox the calendar is displayed.

            Regards

            • 3. Re: richfaces calendar in a popup in chrome
              Michal Petrov Master

              If you want to show the code then please don't show the whole page but remove all elements that are not part of the problem. Are there any errors in the browser console? What version of RichFaces are you using?

              • 4. Re: richfaces calendar in a popup in chrome
                Thierry FOTSO NONO Newbie

                Hi Petrov

                I apologize ,I  m using richfaces 4.5.12.Final  here the right part of code and CSS :

                 

                <rich:calendar value="#{calendarBean.startingDate}"

                locale="#{calendarBean.locale}" popup="#{calendarBean.popup}"

                datePattern="#{calendarBean.pattern}"

                showApplyButton="#{calendarBean.showApply}" cellWidth="24px"

                cellHeight="22px" style="width:200px" />

                 

                ------------------------CSS-----------

                .rf-cal-popup {

                  z-index: 200;

                }

                When I'm in developer tools of chrome the calendar display, but when I close developer tools it does not display

                Regards

                • 5. Re: richfaces calendar in a popup in chrome
                  Michal Petrov Master

                  Thierry FOTSO NONO wrote:

                   

                  When I'm in developer tools of chrome the calendar display, but when I close developer tools it does not display

                  That doesn't sound like the problem is in RichFaces, maybe try running a profile without add-ons (if you have any). In any case check the generated HTML - you should see the popup with "display: none" and that should change to "display: table" after you click the button. If it has "display: table" but you cannot see it check the CSS. (As far as I can see changing the z-index shouldn't be necessary but I think used to be in the past)

                  1 of 1 people found this helpful
                  • 6. Re: richfaces calendar in a popup in chrome
                    Thierry FOTSO NONO Newbie

                    I have done what what you have described, I have even run my browser in Incognito mode(all extensions disabled) but I have the same problem.

                    • 7. Re: richfaces calendar in a popup in chrome
                      Thierry FOTSO NONO Newbie

                      Another remark: when I m not in a popup the calendar is display.

                      • 8. Re: richfaces calendar in a popup in chrome
                        Thierry FOTSO NONO Newbie

                        Hi I find a way to solve my problem. I change the main container h:panelGroup now the calendar is displayed.

                        Thanks for your help  Michal