Responsive // Image dans une balise option
Bonjour à tous,
Je viens à vous avez un petit soucis.
Je suis actuellement en train de réaliser un site web responsive qui doit être relativement bien pensé afin d'être ergonomique le plus possible.
J'ai une liste déroulante faite avec le plugin Jquery multiSelect.
Ce que j'aimerais, c'est lors qu'on réduit la taille de la fenêtre, a peu près à la taille d'un smartphone, en face de chaque option s'affiche une image que l'on peut cliquer, qui affiche des informations.
J'ai déjà essayer plusieurs choses, mais je n'arrive même pas à afficher l'image en face des lignes...
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
| <div class="form-group selectBox">
<label class="col-sm-3 control-label" for="listeGroupe">Groupe de destinataire :</label>
<div class="col-sm-9">
<select name="listeGroupe" id="listeGroupe" multiple style="width:100%; style:true;" class="selectListeDest" >
<?php
if ( isset($_SESSION['groupe_liste']) ) {
$total = count($_SESSION['groupe_liste']);
for ( $i = 0; $i < $total; $i++ ) {
?>
<option value="<?php echo $_SESSION['groupe_liste'][$i]['CODE']; ?>" class="pos" title="<?php
$total_destinataires = count($_SESSION['liste_destinataires_groupe']);
for ($x = 0; $x < $total_destinataires; $x++) {
if ($_SESSION['groupe_liste'][$i]['CODE'] == $_SESSION['liste_destinataires_groupe'][$x]['CODE']) {
/* Un hover axé pour la partie site web */
echo $_SESSION['liste_destinataires_groupe'][$x]['NOM'];
echo (' - ');
}
}
?>">
<?php echo $_SESSION['groupe_liste'][$i]['NOM_GROUPE']; ?>
</option>
<?php
}
} else {
?>
<option value="#">Aucun groupe de destinataire</option>
<?php
}
?>
</select>
</div>
</div> |
Le bout de code qui concerne ce problème.
Un tuto? Peut-être une solution?
Je vous remercie d'avance,
Cordialement,
