Forum : Input/select à largeur automatique

Auteur

Réponse acceptée

Merci à tous pour vos réponses !
Finalement j'ai opté pour une autre solution un peu moins traditionelle. Je vous laisse mon code pour ceux qui sont interessés :)

html :

<div class='form'>
  <p>
    J'ai <input name='age' type='number' value='30' min='1' max='99' /> ans et je cherche à <span data-options='["équilibrer mon alimentation", "améliorer ma digestion", "perdre du poids", "être en forme"]'></span>. Je recherche plûtot des <span data-options='["aliments fonctionnels", "boissons", "snacks", "petits-déjeuners", "repas"]'></span>. Je <span data-options='["ne suis pas", "suis"]'></span> atteint d'allergies.
  </p>
  <button type='submit'>Rechercher dans les produits</button>
</div>

js :

var a = [0, 0, 0];
$('.form span').each(function(i) {
  $(this).text( $(this).data('options')[0] );
  $(this).click(function() {
    a[i] = (a[i] + 1)%$(this).data('options').length;
    $(this).text($(this).data('options')[a[i]]);
    console.log(a[i]);
  });
});

Bonne journée !

Defy

balise style dans l'input et définition de la largeur au cas par cas

JeremieMeunier

Bonjour, les <select> sont toujours de la taille de la plus grande valeur <option> et pour les <input>, il suffit de mettre une valeur fixe ! Après tu aurais voulu que la taille des <select> par exemple change en fonction de la solution choisis ?

mowh

Auteur

Defy : si l'âge est au dessous de 10 ans ou au dessus de 99 ans, et pour les select ça ne marche pas :/
Jeremie : Comme pour Defy, l'input varie de 1 à 120 donc la largeur varie. Je pourrais écrire des conditions en JS pour faire varier la largeur au dessus d'une certaine valeur mais pas super propre. Et tu l'as dis pour les selects !

Lardio

Salut :)
A ce que je vois, les trous proposent des listes deroulantes avec des choix predefinis.
Tu pourrais nous donner le code de base de ton formulaire ?
Ca nous aideras a trouver la solution en visualisant le code de base, et on pourra verifier avec les choix que tu as definis.

Cordialement

JeremieMeunier

Personnellement je ne suis pas sûr que modifier la taille des <select> ou <input> à chaque fois soit super niveau lisibilité par l'utilisateur !

Lardio

Je pense comme @JeremieMeunier..
Le mieux est que tu positionnes une taille qui correspond a la taille de la valeure la plus grande possible dans les choix predefinies.
Mais c'est que mon avis ..
Et sinon, si tu veux adapter la taille de tes <input> a la valeur selectionnee, tu as plusieurs solutions .. Soit tu predefinies des valeurs width a chaque <option>, et tu recuperes ces valeurs. Soit tu calculs la taille (length) de la valeur et tu adaptes automatiquement le width de l'input.

Cdlt

Input/select à largeur automatique

7 réponses