Discussion :

[het44]

Bonjour

J'ai un champ date qui se situe en bas de ma page; j'utilise jquery ui pour afficher un datepicker sur clic de ce champ, tout fonctionne.

Mais la fenêtre du datepicker s'affiche en dessous du champ, ce qui oblige à scroller vers le bas pour l'afficher entièrement puisque la fenêtre s'insère sous le champ et que la page s'agrandit.

Est il possible d'afficher la fenêtre du datepicker au dessus du champ au lieu d'en dessous ?

J'ai regardé dans la doc du composant mais je n'ai rien trouvé la dessus...

Merci d'avance pour votre aide

[PP(Team)]

Bonjour,

Ceci répond-il à ta demande ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$('input.date').datepicker({
    beforeShow: function(input, inst)
    {
        inst.dpDiv.css({marginTop: -input.offsetHeight + 'px', marginLeft: input.offsetWidth + 'px'});
    }
});

Ou :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.ui-datepicker { 
  margin-bottom: 100px;
  z-index: 1000;
}

Cordialement.

[het44]

Bonjour

Merci pour ta réponse.

La popup a bien bougée mais se place désormais à droite du champ.

J'ai pris une capture d'écran :

[PP(Team)]

Bonjour,

A droite du champ ? C'est normal, c'est sa disposition par défaut (il me semble).

Si tu veux la bouger, libre à toi de "bidouiller" avec les "margin-left", "margin-right" pour la déplacer .

Cordialement.

[het44]

En fait ce que j'aurais aimé avoir (si c'est faisable), c'est un code générique qui place la fenêtre en haut du champ et qui fonctionne peu importe la taille du calendrier.

Mais comme on ne connait pas la hauteur du calendrier avant de l'afficher, je vois pas trop comment faire.

[a028762]

Bonjour J'ai testé la deuxième proposition qui devrait être la plus simple.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.ui-datepicker { 
    margin-right: 200px;
    z-index: 1000;
}

moi, c'est l'input un peu trop à droite
et avec Firebug, je ne vois pas mon css pris en considération
jquery-ui.css semble être pré-éminent Olivier