-
1. Re: richfaces calendar in a popup in chrome
michpetrov Jun 19, 2017 4:26 AM (in response to fotsonono2003)You need to change the z-index of .rf-cal-popup (put it above 100).
-
2. Re: richfaces calendar in a popup in chrome
fotsonono2003 Jun 19, 2017 9:36 AM (in response to michpetrov)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
michpetrov Jun 19, 2017 10:03 AM (in response to fotsonono2003)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
fotsonono2003 Jun 19, 2017 10:25 AM (in response to michpetrov)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
michpetrov Jun 19, 2017 11:15 AM (in response to fotsonono2003)1 of 1 people found this helpfulThierry 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)
-
6. Re: richfaces calendar in a popup in chrome
fotsonono2003 Jun 19, 2017 2:44 PM (in response to michpetrov)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
fotsonono2003 Jun 19, 2017 2:49 PM (in response to fotsonono2003)Another remark: when I m not in a popup the calendar is display.
-
8. Re: richfaces calendar in a popup in chrome
fotsonono2003 Jun 20, 2017 3:24 AM (in response to 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