11548 sujets

JavaScript, DOM et API Web HTML5

Jquery datepicker et gabarit elephorm

Bonjour,

J'utilise un gabarit elephorm n°3. Dans le contenu j'ai un form qui contient un input auquel j'affecte un datepicker jquery ui. Le datepicker apparait quand j'entre dans le input.
$("#date").datepicker($.datepicker.regional['fr']);


Le problème :
À l'ouverture de la page, alors qu'elle ne dépasse pas la fenêtre, l'ascenseur vertical apparait et il y a une marge en dessous de ma colonne centrale.
upload/32420-decalage.png
Quand je vais une fois dans le input du datepicker, et que celui-ci apparait donc pour la première fois, ce disgracieux décalage disparait tant que la page n'est pas rechargée.

Quelqu'un a-t-il une idée pour que ce décalage n'apparaisse jamais ?
Modifié par stanc (10 Nov 2010 - 14:18)
Bonjour,

stanc a écrit :
Quelqu'un a-t-il une idée pour que ce décalage n'apparaisse jamais ?

Eh bien tu peux prier pour que ça se corrige tout seul.
Ou bien nous montrer la page en question pour qu'on puisse analyser le problème.
Ou bien analyser le problème toi-même en utilisant un outil tel que Firebug en mode inspection.

Les solutions 2 et 3 (de préférence un mélange des deux Smiley cligne ) me semble plus efficaces que la première.
Bonjour,

Merci de t'occuper de mon cas. Effectivement, ma question manquait de corps. Voici quelques détails.

Tout d'abord, de ce que j'ai testé, le problème ne se présente que sur Firefox, Opera et Camino, pas sur Safari ou Chrome mais ce dernier utilise le webkit il me semble.

Le code simplifié de la page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link rel="stylesheet" type="text/css" href="styles/jquery.ui.all.css" media="screen" />
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.ui.core.js"></script>
<script type="text/javascript" src="lib/jquery.ui.widget.js"></script>
<script type="text/javascript" src="lib/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="lib/jquery.ui.datepicker-fr.js"></script>
<script type="text/javascript" src="lib/jquery.ui.button.js"></script>
<style>
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #555;
}
#global {
	height: 100%;
	min-height: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	width: 750px;
	overflow: hidden;
	background-color: #DDD;
}
#contenu {
	padding: 1.5em;
}
</style>
<script type="text/javascript">
<!--
$(document).ready(function() {
	$("#date").datepicker($.datepicker.regional['fr']);
});
-->
</script>
</head>
<body>
<div id="global">
<div id="contenu">
	<input id="date" name="date" />
</div>
</div>
</body>
</html>
Et donc là l'idée c'est que la personne qui veut t'aider doit passer au moins un bon quart d'heure à recréer ta page web à partir de ce code HTML, en allant récupérer les scripts et styles CSS utilisés sur le site de jQuery UI, sans savoir exactement quelle version de jQuery et de jQuery UI tu utilises. Et ensuite, au bout d'un quart d'heure, cette personne peut enfin tester le comportement de la page recréée dans un des navigateurs cités, sans avoir la certitude que la page ainsi recréée présente bien le problème (risque de classement du bug en could not reproduce élevé Smiley cligne ).

Il y a une technique qui est vachement plus efficace pour demander de l'aide: tu prépares une page en ligne qui reproduit le problème, et tu indiques son URL. Smiley cligne

PS: j'ai lu le code donné mais rien de directement lisible qui cause ce problème.
Modifié par Florent V. (17 Nov 2010 - 12:09)
Alors en fait le script de date picker rajoute un élément DIV vide à la fin de l'élément BODY. Ce bloc a une hauteur qui doit correspondre à la hauteur d'une ligne de texte + du padding. Il est positionné en absolu avec le code suivant:
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }

Le problème c'est qu'aucune propriété top n'est spécifiée. Du coup l'élément se place très loin à gauche mais en bas de #global.

Et que se passe-t-il quand un élément positionné en absolu sort des limites visibles de la page? Dans Firefox au moins, ça fonctionne comme ça:
- s'il sort en haut, il est masqué;
- s'il sort à gauche, il est masqué;
- s'il sort à droite, une barre de défilement apparait pour qu'on puisse voir l'élément;
- s'il sort en bas, idem, barre de défilement.

Donc une barre de défilement apparait à cause de cet élément rajouté en JavaScript dans la page.
(Pour information, un outil tel que Firebug ou Web Inspector permet de voir quels sont les éléments créés dans la page par JavaScript, et quels styles CSS s'appliquent à un élément.)

Définir un top:0 (ou éventuellement un bottom:0 devrait régler le problème, mais il est possible que ça crée des soucis vu que c'est un style partagé par pas mal de widgets de jQuery UI.

Si tu n'as pas récupéré la toute dernière version de jQuery UI (ça me semble être le cas, je crois que dans les versions récentes les fichiers CSS sont tous groupés en un seul fichier pour améliorer la vitesse de chargement...), il se peut que ce bug de jQuery UI soit corrigé dans les versions récentes.
Modifié par Florent V. (17 Nov 2010 - 19:07)
Merci beaucoup pour cette analyse détaillée. Ça m'a donné des clefs pour le faire moi-même à l'avenir.

Ma version de jqueryui était très récente mais j'ai téléchargé la version avec un seul .js et un seul .css hormis les localisations. Ça n'a rien changé.

J'ai ensuite rajouté .ui-helper-hidden-accessible {top: 0;} à mes styles et tout s'est arrangé. Ça fonctionne également avec la version de jqueryui que j'utilisais. bottom: 0 ne change rien. Il sera toujours de temps de voir si d'autres problèmes se présentent du fait de cet ajout.

Ce que je ne comprend pas, c'est pourquoi ce problème disparaissait quand on affichait le datepicker.

http://www.stanc.webuda.com/page.html
Modifié par stanc (18 Nov 2010 - 11:23)
stanc a écrit :
Ce que je ne comprend pas, c'est pourquoi ce problème disparaissait quand on affichait le datepicker.

Le problème est causé par un DIV vide positionné en absolu en bas de page.
Quand le widget «datepicker» s'affiche, ce qu'il se passe c'est que:
- ce DIV est peuplé de tout un tas de code HTML (celui du calendrier et des liens/boutons);
- la valeur des propriétés top, left, ou éventuellement bottom et right de l'élément est modifiée pour le placer à proximité de l'input.

Si l'élément n'est plus en bas de page, il ne pose plus ce problème.
J'ai vu qu'il existait une autre classe ui-helper-hidden qui comporte display: none. Cette classe n'est jamais utilisée dans le code. J'ai donc rajouté cette propriété à la classe ui-helper-hidden-accessible et ça fonctionne aussi bien qu'avec top: 0. J'imagine qu'il y a un binz à ce niveau.

Ce qui m'étonne, c'est que sur le site de démo de jqueryui le problème ne se présente pas.
Bonsoir,

Sur un jquery UI chargé ce jour, 1.8.6, le phénomène devient plus drôle.

Quand on ouvre le datepicker il semble "flasher" un court instant dans le haut de l'écran. Seulement si il est attaché à un INPUT (dans un tableau).

A l'analyse voici ce qui se passe :

pas cliqué :
<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible" id="ui-datepicker-div"></div>

je clique et alors les style va varier ainsi :

position: absolute;

position: absolute; display: block; top: -1000px; (celui-ci semble problématique car le style est display est block ???)

position: absolute; display: none; top: 165.8px; left: 686.85px;

position: absolute; display: none; top: 165.8px; left: 686.85px; z-index: 1;

position: absolute; top: 165.8px; left: 686.85px; z-index: 1;

Des idées pour résoudre ceci ? Vu seulement sur Firefox. Ok sous Chrome.

Bonne soirée, Hervé
la correction pardon :

/*.ui-helper-clearfix { display:block; }*/
.ui-helper-clearfix { display:none; }
Le datepicker va mieux avec la modif du css MAIS les modals ont perdu leur barre du haut et leur boutons qui est aussi du même type...

donc la solution a un effet de bord.
stanc a écrit :
Ce qui m'étonne, c'est que sur le site de démo de jqueryui le problème ne se présente pas.

Les éléments rajoutés à la fin de l'élément BODY sont en display:none sur la page de démo principale. Je ne sais pas pourquoi c'est différent chez toi. Peut-être une option quelque part?
Sujet clos
Aller à