Problema con componente calendario primefaces

**creon79** · 14-12-2010, 12:10

Salve,
sto cercando di utilizzare in un applicazione web un componente calendario della libreria primefaces.
Il problema in cui incappo è questo: ci sono 2 calendari uno sull'altro, ma, aprendo con un bottone il primo, sul calendario in alto rimane in sovraimpressione la casella corrispondente al calendario in basso.
Siccome ho ridefinito diverse classi del foglio di stile di questi calendari, mi chiedevo se ci fosse un particolare attributo da settare su una delle classi per evitare che ciò accada, cioè per far sì che il calendario in alto selezionato ricopra anche la casella di quello più in basso.
In allegato l'immagine.
Ciao,
Danilo

**Mich_** · 14-12-2010, 12:26

Dall'immagine si intuisce che potrebbero esserci degli oggetti diversi che non vengono gestiti direttamente dal browser, ma sono gestiti dal Sistema Operativo.

Dovresti pero` descrivere esattamente cosa sono i vari oggetti: (una <select>, un campo di testo, altro, ...; un oggetto inserito da AJAX, un <iframe>, altro, ...)

Errori di questo tipo ne sono stati segnalati varie volte nel forum, e ci sono dei trucchi per risolverli (spesso, non sempre); ti conviene pertanto anzitutto vedere quali oggetti sono e procedere ad una ricerca nel forum con tali parole chiave.

Se non riesci a risolvere, torna qui, specificando:
- cosa sono i vari oggetti,
- come sono formattati;
- in quale/i browser hai testato,
- quale DTD usi.

Se puoi posta il link alla pagina (va bene anche una pagina in un sito di prova); in alternativa posta i codici HTML e CSS che usi.

**creon79** · 14-12-2010, 12:39

Grazie per la rapida risposta.
Gli oggetti utilizzati sono i calendari della libreria primefaces:

...
<tr class="d1">
<td class="mylabel">
<h

utputText value="#{msg.case_creazioneDa}"/></td>
<td class="myinput">
<p:calendar id="Data_Creazione_Richiesta_da" value="#{casebean.ricercaDa}" pattern="dd/MM/yyyy" popupIcon="/img/button.JPG" style="position: relative;" weekdayFormat="medium" startWeekday="1" showWeekHeader="true" />
</td>
...

Il browser utilizzato è IE7 (ho notato che in IE8 il calendario viene spostato a destra, ma il problema della sovrapposizione non si presenta).
Il DTD utilizzato è il seguente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.

Segue la parte di foglio di stile utilizzata per questo calendario:

/* Calendar primefaces */

.yui-skin-sam .yui-calcontainer {
border:1px solid;
border-color: #C4C0B9;
background: transparent;
}

.yui-skin-sam .yui-calendar .calnavleft {
background:url("../img/sprite.png") no-repeat scroll 0 -450px transparent;
bottom:0;
color:#FFFFFF;
cursor

ointer;
height:15px;
left:-10px;
margin-left:1.4em;
top:0;
width:25px;
}

.yui-skin-sam .yui-calendar .calnavright {
background:url("../img/sprite.png") no-repeat scroll 0 -500px transparent;
bottom:0;
cursor

ointer;
height:15px;
margin-right:1.4em;
right:-10px;
top:0;
width:25px;
}

.yui-calendar .calnavleft {
overflow:hidden;
position:absolute;
text-indent:-10000em;
z-index:1;
}
.yui-calendar .calnavright {
overflow:hidden;
position:absolute;
text-indent:-10000em;
z-index:1;
}

.yui-skin-sam .yui-calendar .calhead{
background:transparent;
border:none;
vertical-align:middle;
padding:0;
}

.yui-calendar .calheader {
position:relative;
text-align:center;
width:100%;
}

.yui-skin-sam .yui-calendar .calheader {
background:none repeat scroll 0 0 transparent;
background-color: #336600;
font-weight:bold;
text-align:center;
}

.yui-calcontainer .title{
position:relative;
background-color: #336600;
z-index:1;
}

.yui-skin-sam .yui-calendar a.calnav {
color:#000000;
padding:0 4px;
text-decoration:none;
}

.yui-skin-sam .yui-calendar a.calnav:hover{
background:url(../img/sprite.png) repeat-x 0 0;
border-color:#C4C0B9;
cursor

ointer;
text-decoration:none;
}

.yui-skin-sam .yui-calendar .calweekdayrow th{
border-color:#C4C0B9;
background-color:#F1EEE9;
}

.yui-skin-sam .yui-calendar .calweekdaycell{
color:#000000;
text-align:center;
font-size:0.9em;
font-family: Arial;
}

.yui-skin-sam .yui-calendar td.calcell{
border-bottom: 1px solid;
border-right: 1px solid;
border-bottom-color: #C4C0B9;
border-right-color: #C4C0B9;
background:#FFFFFF;
padding:1px;
height:1.6em;
font-weight: normal;
font-family: Arial;
color:black;
line-height:1.6em;
text-align:center;
white-space:nowrap;
}
.yui-skin-sam .yui-calendar td.calcell a{
color:black;
display:block;
height:100%;
text-decoration:none;
font-weight: normal;
}
.yui-skin-sam .yui-calendar td.calcell.today{
border-bottom: 1px solid;
border-right: 1px solid;
border-bottom-color: #C4C0B9;
border-right-color: #C4C0B9;
padding:1px;
height:1.6em;
line-height:1.6em;
text-align:center;
white-space:nowrap;
background-color:#FF7800;
color:white;
font-weight: bold;
}

.yui-skin-sam .yui-calendar td.calcell.today a{
background-color:#FF7800;
color:white;
font-weight: bold;
}

.yui-skin-sam .yui-calendar td.calcell.oom{
background-color:#FFFFFF;
color:#C4C0B9;
cursor:default;
font-size:0.9em;
}

.yui-skin-sam .yui-calendar td.calcell.calcellhover{
background-color:#F1EEE9;
cursor

ointer;
}
.yui-skin-sam .yui-calendar td.calcell.calcellhover a{
background-color:#F1EEE9;
}

.yui-skin-sam .yui-calendar td.calcell.selected{
background-color:#336600;
color:#000000;
font-weight: bold;
}
.yui-skin-sam .yui-calendar td.calcell.selected a{
background-color:#336600;
color:#000000;
font-weight: bold;
}

.yui-skin-sam .yui-calendar td.calcell.today.calcellhover{
background-color:#FF7800;
cursor

ointer;
}
.yui-skin-sam .yui-calendar td.calcell.today.calcellhover a{
background-color:#FF7800;
}

.yui-skin-sam .yui-calendar .calrowhead,.yui-skin-sam .yui-calendar .calrowfoot{
color:black;
font-size:0.9em;
font-style:normal;
font-weight:normal;
font-family: Arial;
border-bottom: 1px solid;
border-right: 1px solid;
border-bottom-color: #C4C0B9;
border-right-color: #C4C0B9;
text-align: center;
background-color: #F1EEE9;
}

.yui-skin-sam .yui-calcontainer .calclose{
background:url(../img/sprite.png) no-repeat 0 -300px;
width:25px;
height:15px;
top:.3em;
right:.7em;
cursor

ointer;
}

.yui-calcontainer .close-icon{
position:absolute;
z-index:1;
text-indent:-10000em;
overflow:hidden;
}

.yui-skin-sam .yui-calendar td.calcell.wd6,.yui-skin-sam .yui-calendar td.calcell.wd0{
background-color: #FFEBDA;
color: #FF7800;
}

.yui-skin-sam .yui-calendar td.calcell.wd6 a,.yui-skin-sam .yui-calendar td.calcell.wd0 a{
background-color: #FFEBDA;
color: #FF7800;
}

.yui-skin-sam .yui-calendar td.calcell.oom.wd6,.yui-skin-sam .yui-calendar td.calcell.oom.wd0{
background-color: #FFEBDA;
color: #FF7800;
}

.yui-skin-sam .yui-calendar td.calcell.oom.wd6 a,.yui-skin-sam .yui-calendar td.calcell.oom.wd0 a{
background-color: #FFEBDA;
color: #FF7800;
}

.yui-skin-sam .yui-calendar td.calcell.wd6.calcellhover,.yui-skin-sam .yui-calendar td.calcell.wd0.calcellhover{
background-color:#F1EEE9;
cursor

ointer;
color:black;
}
.yui-skin-sam .yui-calendar td.calcell.wd6.calcellhover a,.yui-skin-sam .yui-calendar td.calcell.wd0.calcellhover a{
background-color:#F1EEE9;
color:black;
}

.yui-skin-sam .yui-calendar td.calcell.wd6.selected,.yui-skin-sam .yui-calendar td.calcell.wd0.selected{
background-color:#336600;
color:#000000;
font-weight: bold;
}
.yui-skin-sam .yui-calendar td.calcell.wd6.selected a,.yui-skin-sam .yui-calendar td.calcell.wd0.selected a{
background-color:#336600;
color:#000000;
font-weight: bold;
}

**Mich_** · 14-12-2010, 13:04

Hai postato un mucchio di parole, ma non hai spiegato quasi nulla.

Anzitutto i codici si postano usando il tag VB CODE (vedi bottone sopra l'area di inserimento).
Quanto postato e` quasi illeggibile.

Hai parlato di una libreria, ma senza un link e` come se avessi detto che hai usato uno strumento sviluppato da te.

Hai postato chilometri di CSS, senza che questo faccia riferimento al codice HTML.

Hai testato solo nei browser che non seguono lo standard, con una DTD che li fa lavorare in modo retrocompatibile.

Io ti chiedevo:
- cosa sono i vari oggetti,
non hai risposto - il riferimento ad uno strumento non specificato

- come sono formattati;
hai postato la formattazione senza dire quali sono gli oggetti - inutile

- in quale/i browser hai testato,
hai testato solo nei browser bacati

- quale DTD usi.
su questo hai risposto, ma usi la DTD che fa lavorare male i browser testati. Prova con XHTML 1.0 Strict, e prova con altri browser.

**creon79** · 14-12-2010, 13:23

Ti rispondo per punti in rosso:

Hai postato un mucchio di parole, ma non hai spiegato quasi nulla.

Anzitutto i codici si postano usando il tag VB CODE (vedi bottone sopra l'area di inserimento).
Quanto postato e` quasi illeggibile.

Hai parlato di una libreria, ma senza un link e` come se avessi detto che hai usato uno strumento sviluppato da te.

http://www.primefaces.org/:

Hai postato chilometri di CSS, senza che questo faccia riferimento al codice HTML.

I riferimenti a quelle classi non ci sono nell'HTML perchè si tratta di classi proprietarie di quel componente, per cui non occorre richiamarle nell'HTML, basta solo sovrascriverle.

Hai testato solo nei browser che non seguono lo standard, con una DTD che li fa lavorare in modo retrocompatibile.

Ovviamente, il browser da me utilizzato è lo standard a cui deve attenersi l'applicativo, non l'ho di certo scelto io.

Quello che vorrei più che altro sapere è se esiste una proprietà definibile nel foglio di stile che consenta di far sì che un componente sia sovrapposto a tutto ciò che c'è sotto.

Io ti chiedevo:
- cosa sono i vari oggetti,
non hai risposto - il riferimento ad uno strumento non specificato

Come detto, si tratta di calendari della libreria primefaces, la domanda è un'altra?

- come sono formattati;
hai postato la formattazione senza dire quali sono gli oggetti - inutile

- in quale/i browser hai testato,
hai testato solo nei browser bacati

**creon79** · 15-12-2010, 12:39

Ho aggiunto le delucidazioni richieste, qualcuno ha qualche indicazione in merito?
Un'altra cosa: le proprietà opacity e filter sembrano non funzionare...

**creon79** · 15-12-2010, 14:11

Grazie al brillante suggerimento di un collega, il problema è risolto:
basta utilizzare la proprietà z-index.
Era appunto quello che avevo chiesto: una proprietà in grado di generare l'effetto richiesto.

Discussione: Problema con componente calendario primefaces

Strumenti discussione

Ricerca discussione

Visualizza

Problema con componente calendario primefaces

Permessi di invio