Style pour une ComboBox et ItemsList dans une popup

Bonjour à tous !

Je dois réaliser un site web en ASP.Net pour une entreprise et j'ai un soucis avec le CSS, j'ai déjà un peu tout trifouillé et rien n'y fait, c'est pourquoi je viens à vous, experts dans ce domaine . Voilà mon problème :

J'ai un page normale dans laquelle j'affiche une PopUp (une simple div qui grâce au javascript agit comme une popup) :


Le problème se situe lorsque j'ouvre ma ComboBox, en effet l'ItemsList (la liste déroulante) reste DANS ma PopUP qui du coup créer un ascenseur (j'ai défini un overscroll et max-height, je ne peux pas changer ces propriétés là). Voir encadré orange.

J'aimerai donc pour des soucis d'ergonomie, afficher l'ItemList PAR DESSUS la div comme l'encadré rouge.


Pour informations :

Style des combobox :

.ComboBoxStyle .ajax__combobox_buttoncontainer button 
{
    background-color: #C6DFF2;
    border: solid 1px #3a4f63;
}

.ComboBoxStyle .ajax__combobox_itemlist
{
    overflow:scroll;
    padding-right: 10px; 
    position: absolute !important;
    left: 0px !important;
    top: 18px !important;
}

.ComboBoxStyle
{
    position: relative;
}

Style de la <Div> (PopUp) :



J'y suis déjà plus ou moins arrivé avec l'attribut position:fixed sur l'ItemList mais lorsque bouge un peu la page elle se déplace aussi...

J'espère avoir été suffisamment clair,
Merci d'avance !
Modifié par Ristretto (30 Jun 2011 - 18:00)

salut,

je ne suis pas certain d''avoir compris ton problème ... tu veux afficher le list item par dessus le div qui le contient ?
le cas échéant essaies de placer l'item list indépendamment du div qui le contient actuellement et tu le positionnes avec un z-index. par contre il te faudra bidouiller un truc (en JS je pense) pour que lorsque le div qui est censé le contenir apparait le list item apparaisse aussi. (par contre si JS désactivé faudra revoir le tout)

soit tu donnes une hauteur au div contenant le list item (comme apparemment le list item est en absolute il sort du flux et n'est pas pris en compte)

j'ai bon ?

A+

o06 a écrit :
tu veux afficher le list item par dessus le div qui le contient ?

Oui c 'est exactement ça, je ne veux pas que le list item soit "mordu" par la div mais qu'il passe par dessus.

o06 a écrit :

le cas échéant essaies de placer l'item list indépendamment du div qui le contient actuellement et tu le positionnes avec un z-index. par contre il te faudra bidouiller un truc (en JS je pense) pour que lorsque le div qui est censé le contenir apparait le list item apparaisse aussi. (par contre si JS désactivé faudra revoir le tout)

J'ai déjà essayé de modifier le z-index en mettant l'item list supérieur à la div, sans résultat... Par contre tu as raison, je vais voir le javascript, j'ai peut-être oublié quelque chose !

o06 a écrit :

soit tu donnes une hauteur au div contenant le list item (comme apparemment le list item est en absolute il sort du flux et n'est pas pris en compte)

j'ai bon ?

J'ai pas très bien compris, là ma popup possède une max-height et un height défini sur auto, si je force le height à une valeur fixe, l'item list devrait faire apparaître des scrolls non ? Je vais essayer ça tout de suite!

Merci des conseils !
A+
Modifié par Ristretto (01 Jul 2011 - 11:47)

re,

a écrit :
J'ai déjà essayé de modifier le z-index en mettant l'item list supérieur à la div, sans résultat... Par contre tu as raison, je vais voir le javascript, j'ai peut-être oublié quelque chose !

mais as tu sorti le list item de son div conteneur pour que le z-index soit pris en compte ?
en fait tu aurais le div avec les éléments et un autre div (ou pas) pour contenir le list item.
le 1er div tu lui donnes une propriété position en relative et le second div (ou le list item seul) tu lui donnes une propriété position en absolute avec un z-index et ensuite tu donnes les valeurs left et top qui vont bien pour le positionner où tu le souhaites.
par contre encore une fois il faudra trouver une solution pour que lorsque le 1er div apparait, le list item (ou le div qui le contient) apparaisse également.