Discussion :

[jojo22222]

Bonjour à tous,

J'ai un problème de mise en page, d'alignement pour être plus précis, dans une liste déroulante.

Je m'explique, je récupère de données d'une BDD, on va dire un tableau de 4 colonne.

Je veux afficher le résultat dans une liste déroulante.
Comment faire pour que mes données soient aligné sous forme de colonne?

je ne veux pas ça :
col1nom col2nom col3nom col4nom
col1nom_dddd col2nom_dddd col3nom_dddd col4nom_dddd

Comment faire pour avoir

Code :

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

1
2
3
 
col1nom      col2nom      col3nom      col4nom
col1nom_dddd col2nom_dddd col3nom_dddd col4nom_dddd

Merci à tous

[Swoög]

les listes déroulantes ne sont pas vraiment faites pour faire de la mise en forme...

ça va te demander de jouer avec pas mal de trucs (et faire du code pas super propre...)

le mieux que je puisse te conseiller, est de faire un tableau (données tabulaires donc alignement = pas de problème ^^) qui aura pour première colonne un checkbox sur chaque ligne...
pas de différence de traitement avec le select multiple (c'est ) et affichage nettement plus sympa ^^

en plus en jouant un peu avec le CSS (height + overflow) tu peux même rajouter un petit scroll sur ton tableau histoire d'avoir une pseudo liste déroulante ^^

[jojo22222]

Merci Swoög !!!!
C'est ce que je me suis dit, alors j'ai fait un tableau avec les checkbox
Mais la très trééééés bonne idée que tu me souffle (height + overflow) m'apporte une pleine satisfaction.

Car si au départ, je voulais faire un select c'était parce que je voulais avoir un ascenceur!!!

En fait je n'arrive pas à faire l'ascensceur

Code :

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

<table style="width:100%;height:10px;overflow:auto">

Où que je me suis trompé?

[jojo22222]

Ok, j'ai mis le tableau dans un div et c'est à lui que j'applique la hauteur + overflow....

[Swoög]

le code que tu donnes devrait fonctionner...

tu peux en montrer un peu plus ?

[jojo22222]

Pour l'overflow dans le tableau qui marchait pas c'est ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<table style="width:100%;height:50px;overflow:auto">
<tr>
  <td>dsfsqd </td>
</tr>
<tr>
  <td>dsfsqd </td>
</tr>
<tr>
  <td>dsfsqd </td>
</tr>
etc ---
</table>

Code :

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
 
Pour le tableau dans le div qui marche c'est ça
<div style="width:100%;height:50px;overflow:auto">
<table style="width:100%;">
<tr>
  <td>dsfsqd </td>
</tr>
<tr>
  <td>dsfsqd </td>
</tr>
<tr>
  <td>dsfsqd </td>
</tr>
etc ---
</table>
</div>

Si tu me trouve une soluce avec le tableau ca me va bien parce que j'ai des entetes de tableau (th) et forcement, quand je scrolle dans le div, et benh, je ne les vois plus ces entetes

[Swoög]

je pourrais te proposer ceci, mais si ça fonctionne pas... ça fonctionne pas

Code :

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
<table style="width : 100%">
<thead>
   <tr>
      <th>tete1</th>
      <th>tete2</th>
   </tr>
</thead>
<tbody style="height : 50px; overflow : auto">
   <tr>
      <td>1.1</td>
      <td>1.2</td>
   </tr>
   <tr>
      <td>2.1</td>
      <td>2.2</td>
   </tr>
</tbody>
</table>

[jojo22222]

Bon 1 bonne et une mauvaise nouvelle :

Ca fonctionne ... et ca fonctionne pas,
je te laisse devinez quel navigateur ne fonctionne pas...

Dommage, solution extremement elegante, dommage, qu'on ne voit pas l'ascensceur par contre. Ergonomiquement parlant, on ne voit pas tout de suite qu'on peut scroller.