Discussion :

[boteha]

Bonjour,

Savez-vous s'il existe une fonction PHP ou un moyen pour calculer la largeur d'une chaîne en em ou en px ?

strlen ($str) mais qui renverrait la width ???

J'ai une suite de SELECT dans des formulaires dans un même tableau.

Code :

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

1
2
3
4
 
<tr><tr><form name="F1">SELECT SUBMIT</form></td></tr>
<tr><tr><form name="F2">SELECT SUBMIT</form></td></tr>
etc...

La largeur de chaque SELECT dépend du contenu.
J'aimerais que tous mes SELECT aient la même largeur.
En html, cela me semble impossible, sauf à imbriquer des tableaux dans tous les sens.

Par contre, si je peux calculer la largeur du plus long OPTION, j'affecte aux SELECT cette largeur et le tour est joué.

Merci d'avance.

[nsanabi]

je te propose de faire ça en javascript:
une foi les element de ta pages chargés comparer la largeur des deux select et affecter la plus grande à la plus petite
documente toi sur les proprietes :

Code :

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

1
2
3
4
5
6
taliste1=document.getElementById("idDe TaListe1");
 
 
taliste1.offsetWidth
taliste1.innerWidth
et taliste1.style.width

bon codage

[boteha]

Bonjour,

Merci de ta réponse :

je te propose de faire ça en javascript:

Cependant, je ne vais pas faire cela en javascript, pour plusieurs raisons :
Je connais mal
J'ai peur que le javascript ralentisse l'affichage
Je suppose que les fonctions ne sont pas supportées par tous les navigateurs.

Pour faire cela avec PHP, il suffirait d'avoir un tableau qui donne la larguur en em de chaque lettre de l'alphabet.
Je n'ai pas trouvé ce tableau mais je suppose qu'il existe.

Dommage qu'une solution pûrement html ne soit pas possible à ma connaissance.

select {display: inline-block}

On pourrait espérer que le select occupe alors toute la place disponible dans la cellule mais ce n'est pas le cas.

Si on ajoute {width: 100 %} il n'y a pas deux navigateurs qui réagissent pareil.

Par contre {width: ??em}, ça marche.

D'où l'idée de trouver la largeur, mais pas en javascript...

[nsanabi]

J'ai peur que le javascript ralentisse l'affichage

pas d'une façon significative tenant en compte la puissance actuelle des ordi, ce sera très négligeable. par contre faire des boucles en php pour extraire la plus longue chaine puis convertir en px c'est aussi un temps de calcul en plus coté serveur, sans parler de la faisabilité de la chose (comment connaitre la taille avant le rendu, avec la police de caracteres et autres ??)

Je suppose que les fonctions ne sont pas supportées par tous les navigateurs

il suffira d'adapter ton code javascript, en plus avec le W3C DOM tout le monde s'est mis d'accord sur une seule spécification.

javascript me parait etre la meilleur solution, mais comme tu n'est pas à l'aise avec je ne pourrai te l'imposer
donc je te propose une DEUXIEME astuce qui consiste avant tout à abandonner la mesure de ta chaine en pixel :

1- tu récupère la plus grande taille (pour mon exemple on va dire que c X)
2- tu prend UNE chaine (avec une taille <X) qui sera ajoutée à ta liste et tu la complète avec des espaces en utilisant la fonction str_pad($laChaineAAjouteeALaListe, X);

Code :

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

1
2
$input = "Alien";
echo str_pad($input, 10);                      // affiche "Alien     "

4-mais parceque les navigateurs html ne tiennent pas compte des espaces lors du rendu, il va faloir appliquer une seconde manip :

Code :

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

$laChaineAAjouteeALaListe = str_replace(" "," ",$laChaineAAjouteeALaListe);

AINSI puisque tu aura dans tes listes des chaines avec le même nbr de caractères, tes liste auront la même largeur

dans le cas ou tu voudra récupérer les éléments de ta listes pour un une autre utilisation, tu peut utiliser la fonction trim ou ltrim afin de supprimer les espaces en trop (après remplacement des &nbsp par des espaces comme on les connais).

je sais que l'astuce est un peu tiré par les cheveux, mais mesurer la taille en pixel n'en ai pas moins obsolète

[boteha]

Bonsoir,

Merci de ta réponse.

Pour Javascript, je n'ai pas envie. Tout le monde n'a pas le dernier navigateur.

Ton astuce me plaît bien, à un détail près. Tu es obligé de prendre une police à taille fixe, de type Courrier. Ou j'ai mal compris ?

Je reconnais que mesurer la largeur est nul, mais tu peux faire cela par une fonction d'administration qui va enregistrer la largeur max dans un tableau. En exploitation, tu vas chercher la largeur max dans le tableau, tu l'entres dans une feuille de style dynamique, ça doit prendre un millionnième de seconde.

Il est clair que le mieux est une solution pûrement html.

Je me demande si le code suivant est conforme :

Code :

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

1
2
3
4
5
6
7
 
<tr><form><td><a>lien_1</a></td><td>SELECT_1</td><td>SUBMIT</td></form></tr>
<tr><form><td><a>lien_2></a></td><td>SELECT_2</td><td>SUBMIT</td></form></tr>
<tr><form><td><a>lien_3</a></td><td>SELECT_3</td><td>SUBMIT</td></form></tr>
etc...
 
select {display: block}

Avec un peu de chance, le navigateur aligne tout les SELECT sur la plus grande largeur qu'il a calculée automatiquement.

Je vais essayer (dans quelques jours).

Je te tiens au courant.

[boteha]

Bonjour,

Code :

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

1
2
3
4
5
 
<tr><form><td><a>lien_1</a></td><td>SELECT_1</td><td>SUBMIT</td></form></tr>
<tr><form><td><a>lien_2></a></td><td>SELECT_2</td><td>SUBMIT</td></form></tr>
<tr><form><td><a>lien_3</a></td><td>SELECT_3</td><td>SUBMIT</td></form></tr>
etc...

Sans surprise, ce code fonctionne, mais n'est pas conforme.

Cette solution ne peut donc pas être retenue.