1485 sujets

Web Mobile et responsive web design

Bonjour à tous,

J’utilise le plugin jqtransform pour modifier l’apparence de mes selects, et puisque ces dernières contiennent plusieurs valeurs ( <option></option>) j’ai fixé la hauteur de la balise ‘ul ‘ générée par le plugin avec un overflow auto


.jqTransformSelectWrapper ul {
	position: absolute;	 
	top: 32px;
	left: 0px;
	background-color: #FFF;
	border: solid 1px #2c77b9;
	display: none;
	height:160px;
	overflow: auto;
	z-index:10;
}



Pour les versions desktop pas de prob
upload/27636-select1.gif

mais dans les versions mobile le scroll ne s’affiche pas ou je ne parviens pas a scroller
upload/27636-select2.gif

Qlq a une idée ?
Merci d'avance.
Salut,

sur quel mobile/os fais-tu tes tests ? L'overflow:hidden a eu du mal à s'imposer.

Et autre question : as-tu essayé de scroller avec 2 doigts ?
j'ai testé sur un iPhone il semble que l'overflow est ignorer, mais pour un os symbian j'ai toujours des problemes.
Honnêtement,

le jqtransform multi-device est très hasardeux. Chaque terminal gère les select à sa sauce et c'est bien mieux ainsi.

Maintenant si tu veux t'assurer des overflow:hidden, tu peux jeter un oeil à ça : iscroll.
merci Julien Optea

y-a-t-il une alternative autre que jqtransform qui est responsive ?
Tu peux toujours construire une liste en js. La gestion sera affinée par tes soins.

En gros pour chaque select tu vas créer un ul>li comme jQtransform mais tu vas gérer différens points précisément :

* déroulé
* positionnement (tu évites l'overflow)
* enroulement sur une action en dehors de ta liste
* enroulement au choix de l'option + maj de ton input de type hidden.

Grosso-modo c'est la même chose que jQtansform mais ça répond comme il se doit à tes besoins.

Sinon tu peux aussi tenter l'auto-complétion sur un champs text, ça peut remplacer un select trop long Smiley smile