1485 sujets

Web Mobile et responsive web design

Taille liste déroulante

Bonjour,

je débute dans le domaine du web mobile.

J'ai recherché plusieurs tutos et je suis tombée sur la CSS de Alsa.

J'ai appliqué à la lettre le tuto en testant avec une liste déroulante dans un formulaire.

Seulement la liste qui est créée depuis une requete SQL dépasse de mon écran.

Auriez vous quelques pistes ?

Merci pour votre aide. Smiley smile

Marjorie
Modifié par la_pomme (22 Nov 2012 - 16:31)
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, target-densitydpi=device-dpi">
<link href="../style/style_ecran.css" rel="stylesheet" type="text/css">
<title>Mélanges Agricommand</title>
</head>

<body>
<div id="page">

<div>
<span>
Cultures :
</span>
<span>
<SELECT name='search_culture_id' onchange='javascript:document.forms[\"edit\"].submit();' >
<option value="1">Abricotier</option>
...
<option value="785">Locaux pour préparation de la nourriture pour animaux domestiques</option>
</select>
</span>
</div>

</div>
</body>
</html>

C'est un extrait du rendu HTML de ma page

upload/47167-iphone3.jpg

Vraiment je débute j'ai fait un test peut être bête ou quoi

Mon problème vient ma liste trop grande pour l'écran je teste sur le petit écran d'un iphone 3GS
Modifié par la_pomme (22 Nov 2012 - 17:29)
Salut,

si je ne dis pas de bêtises tu peux donner une largeur à ton <select> mais pas à tes <option>.

Une solution consiste à faire sa propre liste déroulante en js. Perso j'ai un petit faible pour les listes de définitions mais faisons simple.

Tu crée un ul>li, quand tu clique sur les li tu mets à jour un champ input hidden.

Si tu veux une idée, tu peux aller voir sur Vertbaudet. Tu ajoute un article dans le panier, tu vas dans ce panier. Ensuite tu ajoute un produit via référence catalogue (t'en as une juste au dessus) et observe la liste.

A ta dispo,

Ju
Modifié par JulienFouquet (23 Nov 2012 - 11:25)
Sujet clos
Aller à