28172 sujets

CSS et mise en forme, CSS3

Bonjour,

j'utilise le tableau ( http://tablesorter.com/docs/ ) qui me permet de faire des tris sur les colonnes par JQuery.

J'ai fixé l'espace en hauteur que doit occuper ce tableau (CSS height appliqué à tbody). Des éléments du tableau sont cachés et apparaissent par un effet JQuery (slideUp/Down()) lorsque l'on clique sur un élément, ce qui a pour effet d'augmenter la hauteur occupée par une ligne.
Sous le tableau, il y a des boutons. À cause de l'effet JQuery qui agrandit la hauteur d'une ligne, les boutons se déplacent visuellement à l'écran puisqu'il y a un réajustement. Pour éviter ce réajustement, j'ai souhaité fixer la hauteur du tbody auquel j'applique un ascenseur vertical. C'est appliqué au tbody et non au tableau complet pour que l'ascenseur ne s'applique pas à l'en-tête qui doit rester visible.

Si j'ai un nombre conséquent d'entrées dans mon tableau, un ascenseur apparait, ce qui est le comportement souhaité. En revanche, si j'ai très peu d'entrées, celles-ci s'adaptent automatiquement en hauteur pour occuper tout l'espace disponible, ce qui est laid. Comment pourrais-je empêcher ce réajustement ?

Lorsque l'on clique sur le lien qui agrandit la hauteur d'une entrée, j'ai tenté de récupérer la hauteur du tbody (avec innerHeight() ou height()) et si celle-ci excède la hauteur que j'ai fixée alors j'ajoute une classe au tbody. Cette classe CSS est celle qui fixe la hauteur et déclare l'utilisation d'un ascenseur.
Mais cela ne fonctionne pas correctement, le comportement est étrange. Pour récupérer la valeur, j'attends que l'effet JQuery soit terminé.

Auriez-vous des suggestions, à la fois sur du JQuery et sur du CSS à me faire ?

Merci d'avance.
Modifié par metalivore (16 Dec 2010 - 11:04)