richfaces calendar in a popup in chrome

[fotsonono2003]

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

[michpetrov]

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

[fotsonono2003]

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

[michpetrov]

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?

[fotsonono2003]

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

[michpetrov]

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)

[fotsonono2003]

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.

[fotsonono2003]

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

[fotsonono2003]

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