[Tableau] Dynamisme différent IE e FFX

Version imprimable

01/04/2009, 11h22
richard_sraing

[Tableau] Dynamisme différent IE e FFX

Bonjour tout le monde.

Voilà, j'ai déjà poster un message il y a quelque temps car j'étais à la recherche d'un tableau pouvant se redimensionner "dynamiquement" avec des scrollbar et tout et tout(ici)

Et maintenant, j'ai remarqué que soit firefox, j'avais un problème relativement gênant. Je vais le montrer, c'est plus simple que d'expliquer:

Sous IE, tout se passe bien:
http://pics.imagup.com/02/1238602557_tableauJS-IE.png

Par contre sous FFx:
http://pics.imagup.com/02/1238602603_tableauJS-FFX.png

Quelqu'un aurait-il une idée d'où provient se problème?

Mis à part ça, tout le reste fonctionne parfaitement (grâce a SpaceFrog d'ailleurs qui m'a à l'époque, mis sur la voie).

Dans l'attente d'une réponse, je vais continuer à vérifier mon code, peut être que j'ai oublier quelque chose au niveau css ou autre.

p.s.: le site n'est malheureusement pas online, si il vous faut donc le code, demandés, je verrais ce que je peux faire.
01/04/2009, 11h29
Bovino

Tu as raison sur tes captures, il manque le code ! :mouarf:
01/04/2009, 11h38
richard_sraing
oui ;) mais aurais tu une idée d'où provient le problème?

J'ai essayer de préciser dans le css de ne pas mettre les scrollbars dans les divs contenant les différents tableau, mais apparement ça ne marche pas...

Pourtant, je dois bien mettre simplement:
Code:

1 2 autoscroll: none;
Sinon, quelqu'un aurait une idée de la source du problème, qui est comme Bovino l'a fait remarquer

Citation:

Envoyé par Bovino

Tu as raison sur tes captures, il manque le code ! :mouarf:

Est la non visibilité du code.
01/04/2009, 12h05
le_chomeur

lol c'était ironique , les deux screen sont identique ... on ne voit le code sur aucun des deux :)
02/04/2009, 08h46
richard_sraing

Citation:

Envoyé par le_chomeur

lol c'était ironique , les deux screen sont identique ... on ne voit le code sur aucun des deux :)

non, tu parles de la désignation, pas du code.

Sur le premier screen, on voit le code "04522", mais sur le deuxième screen, il n'apparaît pas, alors que le reste de la ligne apparaît.

En fait, ce qu'il y a, j'ai un tableau principal avec 2 lignes et 2 colonnes.

La case [1;1] contient un tableau d'une ligne et 2 colonnes avec "Code" et "Désignation" comme contenu.

La case [1;2] contient un tableau d'une ligne de nouveau, avec les colonnes contenant les autres en-têtes, à savoir "Catégories", "Réf four. / ...", ...

La case [2;1] contient un tableau de plusieurs lignes (autant qu'il y a d'éléments à afficher), et deux colonnes. Dans ce tableau, lorsque je scroll vers le bas, la dernière ligne ne s'affiche pas, elle n'est pas visible et pourtant bien là. Lors d'une sélection à la souris, je récupère bien l'élément.

La case [2;2] contient à nouveau un tableau avec les autres informations de mon éléments. Donc le nom de la catégories...

C'est une base de données de test que j'utilise pour le développement, et les éléments ont plein d'informations manquantes, car rentrées à l'arrache.
Chaque tableau est imbriqué dans un div afin de permettre un redimensionnement par code javascript.

Voilà, je pense avoir expliquer tout ce qu'il est utile de savoir.

p.s.: Je sais que hier était le 1er avril, mais ce n'en était pas un blague, j'ai vraiment le problème de ne pas voir la dernière ligne de mon tableau de gauche, et n'en trouve pas la solution.
02/04/2009, 09h00
SpaceFrog

le code javascript... celui qui créé le tableau :whistle: celui là on le le voit pas ...
et mon cable pour ma boule de cristal usb est trop court ...

A vue de nez je dirais une balise fermante de tr ou de td manquante...
02/04/2009, 09h16
DoubleU

Quand tu regardes la source généré, la ligne manquante est présente ou non? Si elle est bien la, c'est "juste" un problème d'affichage ?
02/04/2009, 09h30
le_chomeur

WAou effectivement je n'avais pas vu ...
toutes mes excuses :)

Montres nous effectivement le code généré ou javascript qui produit ces lignes

Pour rappel, je me suis très fortement inspiré de la page suivante:

celle-ci

Alors voilà, le code javascript est identique à celui sur cette page:ici

Pour le css, c'est moins évident, car j'ai plein de format différent, je vais le placer ci-dessous, en essayant de ne rien oublier:
(plus compliquer du fait que j'ai plusieurs tableaux sur le site, et qu'ils ont des formats et des mises en formes différentes)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
td    {
	font-family: Verdana;
	font-size: 10pt;
}
tr    {
	font-family: Verdana;
	font-size: 10pt;
}
Table {font-family: arial; font-size: 12px}
.headerColumn div{
	overflow: visible;
}
 
.scrollTable table{
	border-collapse: collapse;
}
 
.scrollTable table td, .scrollTable table th{
	vertical-align: top;
	text-align: left;
	margin: 0px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 1px;
	padding-bottom: 1px;
	white-space: nowrap;
	border-top: dotted 1px #aaaaaa;
	border-right: 1px dotted green;
}
 
th{
	background-color: #666666;
	color: #ffffff;
	font-weight: bold;
}

Et pour le code généré (qui est très moche, mais pas le choix):

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<table class="scrollTable" id="scrollTable" cellpadding="0" cellspacing="0" border="0"><tr><td><div class="corner"><table cellpadding="0" cellspacing="0" border="0" ><tr><th class="Header" align="left"><div>«Code»</div></th><th Class="Header" align="left"><div>«Désignation»</div></th></tr></table></div></td><td><div class="headerRow"><table cellpadding="0" cellspacing="0" border="0" ><tr><th class="Header" align="left"><div>«Catégorie»</div></th><th class="Header" align="left"><div>«Réf. fourn/fabricant»</div></th><th class="Header" align="right"><div>Prix vente base</div></th><th class="Header" align="right"><div>Stock disponible</div></th></tr></table></div></td></tr><tr><td valign="top"><div class="headerColumn" style="overflow:visible"><table cellpadding="0" cellspacing="0" border="0" ><tr><th class="Header" align="left"><div>00161</div></th><th class="Header" align="left"><div>dgjjgdjf</div></th></tr><tr><th class="Header" align="left"><div>01310</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>01320</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>01673</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>01675</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>01700</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>01715</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>01750</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>01770</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>01791</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>03070</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>03082</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>03688</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>03770</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>04431</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>04516</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>04518</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>04519</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>04521</div></th><th class="Header" align="left"><div></div></th></tr><tr><th class="Header" align="left"><div>04522</div></th><th class="Header" align="left"><div></div></th></tr></table></div></td><td><div class="body"><table cellpadding="0" cellspacing="0" border="0" ><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>34,5600</div></td><td class="Data" align="right"><div>0</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>0</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>2</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>2</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>1</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>3</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>1</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>1</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>1</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>2</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>2</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>1</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>1</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>14</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>1</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>4</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>2</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>1</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>1</div></td></tr><tr><td class="Data" align="left"><div></div></td><td class="Data" align="left"><div></div></td><td class="Data" align="right"><div>0,0000</div></td><td class="Data" align="right"><div>1</div></td></tr></table></td></tr></table>
</div>
<script language="javascript">
 paddingLeft = 10;
 paddingRight = 10;
 paddingTop = 1;
 paddingBottom = 1;
 
 ScrollTableAbsoluteSize(
 document.getElementById("scrollTable"),
 700,
 200);
</script>

Lors de la génération, tout se trouve sur la même ligne. Si ce n'est pas le cas, le tableau ne s'affiche pas correctement :aie:, mais ça Spacefrog m'avait mis sur la piste du pourquoi (le fait que IE et FFx lisent le code différement et interprète ou non les CR).

Pour le tableau, il n'est pas créer par du code Javascript, mais du code Dataflex, le javascript ne sert que dans la mise en forme du tableau.

Voilà, je pense que j'ai montrer, ou mis à disposition tout ce qui est important.

Et comme DoubleU le dit, ce n'est qu'un problème d'affichage, car la ligne est dans le code, elle est juste cachée comme si la scrollbar était dessus, mais n'apparaissait pas.

02/04/2009, 10h21
SpaceFrog

rajoute une paire de <br /> apres ou augment le padding-botton ?

sinon il eut ete interressant de vois le code html de la fin du tableau
02/04/2009, 10h34
le_chomeur

essaye de rajouter un petit padding a ton conteneur global :) ( celui qui contient les cellules + le scroll )

Voici le code que j'ai dans ma page asp :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <table class="scrollTable" id="scrollTable" cellpadding="0" cellspacing="0" border="0"><%EndRowId = oCatalogue.Call ("Get_RunCatalogue", 5, StartRowId, MaxRecs)%></table> </div> <script language="javascript"> paddingLeft = 10; paddingRight = 10; paddingTop = 1; paddingBottom = 1; ScrollTableAbsoluteSize( document.getElementById("scrollTable"), 700, 200); </script>
Ajouter un <br/> ne marche pas du tout, du moins pas à où je l'avais placer :(
Augmenter le padding-bottom ne fonctionne pas correctement, l'erreur se réduit, et la case commence à apparaître,mais toute la structure du tableau torche un peu... :(

Je ne sais pas pourquoi ça marche parfaitement sous IE et pas sous FFx.
Je dois avoir un problème de syntaxe quelque part, sinon FFx le ferait correctement aussi. Et quand je regarde l'exemple de la page citée dans le post précédent, que ce soit IE ou FFx, il l'affiche correctement.
Est ce qu'il se pourrai que ce soit dû au fait que j'ai deux colonnes fixes?

Je viens de voir une source possible de l'erreur.

Je pense que l'erreur viens du code javascript pour le redimensionnement, ou du moins en partie.

Cette partie de code est appelée lorsque l'on veut redimensionner les colonnes pour les headers du coin supérieur gauche:
Code:

1 2 3 4 SetWidth( cornerDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[childElement], headerColumnDiv.childNodes[childElement].childNodes[childElement].childNodes[0].childNodes[0]);
Par contre, lorsqu'on souhaite redimensionner les colonnes des Headers des Data, on passe pa une boucle, comme ceci:
Code:

1 2 3 4 5 6 7 8 9 10 11 for (i = 0; i < headerRowColumns.length; i++) { if (headerRowColumns[i].tagName == "TD" || headerRowColumns[i].tagName == "TH") { SetWidth( headerRowColumns[i], bodyColumns[i], i == headerRowColumns.length - 1); } }
Mais comme moi aussi j'ai plusieurs colonnes dans le coin supérieur gauche, je ne dois pas boucler aussi??

Voici la fonction de SetWidth
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 function SetWidth(element1, element2, isLastColumn) { var diff = paddingLeft + paddingRight; if (element1.offsetWidth < element2.offsetWidth) { element1.childNodes[0].style.width = element2.offsetWidth - diff + "px"; element2.childNodes[0].style.width = element2.offsetWidth - diff + "px"; } else { element2.childNodes[0].style.width = element1.offsetWidth - diff + "px"; element1.childNodes[0].style.width = element1.offsetWidth - diff + "px"; } }
De plus, il passe trois élément dans le deuxième exemple d'appel, et pas dans le premier.
Je dis donc -> :asuivre:

02/04/2009, 11h31
SpaceFrog

childNode ....
oui source d'erreur

passe un coup de nodecleaner ...

http://javascript.developpez.com/faq...M#DOMIEFirefox
02/04/2009, 11h36
le_chomeur

GG spaffy !
le coup des noeuds vide sous firefox !
02/04/2009, 11h48
richard_sraing

oui, je veux bien, je suis d'accord sur le fait que IE et FFx interprète différemment le code en fonction des retour à la ligne, les espaces et autres.

Mais moi dans ma page, le code est sur une même ligne, pas de retour à la ligne rien. Dans le cas contraire, j'avais eu la blague au début, le tableau ne s'affiche même pas.

Mais à ce niveau-ci, tout mon tableau est sur une seule ligne de code. (c.f. le bout de la page avec le table il y a 2 post).

Je viens de vérifier également dans un autre tableau, ne possédant qu'une colonne non scrollable horizontalement, et le problème est pareil, la dernière ligne de la partie non scrollable horizontalement n'est pas visible non plus.
02/04/2009, 12h35
richard_sraing

Bon effectivement, ce n'était qu'un problème de mise en place et d'affichage.

Afin de contourner le problème, j'ai simplement masquer la partie du code javascript disant que le scroll devait être "hidden" dans le cas ou la hauteur ou la largeur étaient bonnes.

Je vais essayer, dans un futur plus ou moins proche (c-à-d quand je n'aurait rien d'autre à faire), de remettre en place le hidden lorsqu'il n'a pas besoin de les afficher, mais alors redimensionner la fenêtre comme il le faut.

Merci en tout cas pour l'aide que vous m'avez apporter.
02/04/2009, 13h52
SpaceFrog

peu importe que le code soit sur une seule ligne ou pas ...
les nodes ne sont pas gérés de la même façon ...