Discussion :

[richard_sraing]

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:


Par contre sous FFx:


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.

[Bovino]

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

[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 CSS :

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

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

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

Est la non visibilité du code.

[le_chomeur]

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

[richard_sraing]

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.

[SpaceFrog]

le code javascript... celui qui créé le tableau 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...

[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 ?

[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

[richard_sraing]

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 css :

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

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 html :

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

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 , 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.

[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

[le_chomeur]

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

[richard_sraing]

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

Code html :

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

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?

[richard_sraing]

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 javascript :

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

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 javascript :

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

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 javascript :

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

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:

[SpaceFrog]

childNode ....
oui source d'erreur

passe un coup de nodecleaner ...

http://javascript.developpez.com/faq...M#DOMIEFirefox

[le_chomeur]

GG spaffy !
le coup des noeuds vide sous firefox !

[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.

[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.

[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 ...