Interface utilisateur pour sélectionner la largeur de colonne
Je crée une application qui construit un formulaire en utilisant des options d'interface utilisateur simples (à la Cognito ou Wufoo).
Mon problème actuel est que j'essaie de trouver un moyen d'afficher une option pour définir la largeur de la colonne sélectionnée, de telle sorte que l'utilisateur puisse définir la taille de la colonne (l'utilisateur la voit comme un simple élément comme une zone de saisie de texte, mais d'un point de vue DOM, il se trouve à l'intérieur d'une colonne).
J'ai divisé les tailles de colonnes en 6 grilles (basé sur la grille de colonnes de bootstraps 12), mais j'aimerais que les options par défaut ne montrent que 4. C'est parce que la plupart du temps l'utilisateur va juste avoir besoin des options simples pour les tailles de colonnes entre 1-4 (c'est-à-dire entre 1/4 de la largeur, jusqu'à la pleine largeur), mais à l'occasion, quelqu'un crée une fantaisie Le formulaire peut nécessiter la possibilité de diviser une largeur de colonne au sixième de la largeur totale.
Donc, ce dont j'ai besoin, c'est d'une interface utilisateur simple qui permet ce type de configuration. J'ai joué avec quelques options, mais ce que j'ai en ce moment semble un peu trop compliqué et prend trop de place.
Ainsi, par exemple, l'image ci-dessous a une configuration pour sélectionner des largeurs basées sur 1-4, mais autorise ensuite 1-6 si vous cliquez sur le menu déroulant. Ce qui serait bénéfique, c'est que si j'avais une seule interface utilisateur pour prendre en compte les différentes tailles, et que cela soit fait de manière à ce qu'il soit adapté aux mobiles (cela signifie qu'il n'y a pas de zones de clic extraordinairement petites que seule une souris peut cliquer).
Mise à jour
Afin d'avoir 1-4 mais aussi une option étendue, il doit s'étendre à 1-8 (pas 1-6).
Une approche qui va dans la direction que je recherche serait quelque chose comme ce qui suit, où l'utilisateur pourrait sélectionner l'un des incréments. Le problème avec cela est que par défaut, il présente trop d'options pour l'utilisateur moyen qui va généralement vouloir les tailles 1/4, 1/2, 3/4 , et plein.
Pouvez-vous simplement rendre l'Edge déplaçable?
Vous pourriez avoir des encoches dans le glissement si nécessaire. Toute bibliothèque JS possède une fonction glisser-déplacer.
Pour les encoches, voici un exemple, imaginez simplement que l'élément déplaçable soit la bordure entière. https://jqueryui.com/slider/#steps
Pensez-vous que cela pourrait fonctionner? Considérez ce rectangle comme un espace ou une colonne variable. Je n'ai pas fait l'animation complète mais j'espère que ça vous donnera une idée.
Si vous créez un formulaire, pourquoi ne pas simplement laisser les autres options choisies dicter le dimensionnement de la colonne?
Par exemple, j'ai besoin d'un formulaire qui a ...
- 6 zones de saisie de texte
- Un ensemble de boutons radio (5 options au total)
- Une grande zone de texte pour une réponse étendue
Je veux que ceux-ci soient divisés en deux colonnes distinctes, et je veux pouvoir les organiser/ordonner dans ces deux colonnes.
Sachant cela, nous devrions être en mesure de déterminer la taille optimale. Si je manque quelque chose d'évident, faites-le moi savoir. Mais ... Si vous essayez de fournir une création de formulaire simple, il y a très peu de situations qui vous obligeraient à dévier de ce type d'implémentation.