28106 sujets

CSS et mise en forme, CSS3

Modérateur
Bonjour à tous,

Je travail en ce moment sur un projet où les éléments de formulaire sont fort présents. Du coup, j'essaie de faire un formulaire adaptatif selon le parent. Si le form a de la place pour s'étendre alors j'aimerais qu'il soit présenté sous une forme "inline" et si il est dans un parent qui est plus petit (aside, modal, peu importe mais je ne connais pas sa taille...), alors j'aimerais que le form soit présenté en "block"...

Etant donné que je ne connais pas la taille du parent puisque il y a pas mal d'utilisation dans le projet et je ne connais pas les emplacement à l'avance (et que dans ce cas là les médiaqueries ne me servent à rien), j'ai réfléchis (un peu)... et j'ai pensé à grid et son minmax.

Voilà un test un peu brouillon...
Mon problème actuel est de limité cette grid à repeat de 2 colonnes maximum. Est-ce que c'est possible ? Une autre méthode ? (je cherche une solution sans js). Aussi dans mon idéal dans la version "inline", les labels pourrait avoir un min-width de 'min-content', max-width de '1fr'. Pour les inputs & co, une taille de 2fr

Une petite idée/piste ?

Voilà ce que je veux dire par inline/block :
"Inline"

label ---------------- input -------------------------------------------
label ---------------- select ------------------------------------------
label ---------------- textarea ----------------------------------------
label ---------------- container... -------------------------------------


"Block"

label --------------------- 
input ---------------------

label ---------------------
select --------------------

label ---------------------
textarea ------------------

label ---------------------
container... --------------



edit : ça m'a fait repenser à un article que Rémi Parmentier (Hteumeuleu) avait écrit sur les alternatives aux médiaqueries pour les e-mail. Je vais peut-être essayer cette direction pour faire un test
Modifié par Yordi (31 May 2018 - 15:38)
Modérateur
Yep, merci Laurent de la réponse.
C'est bien l'idée mais j'aimerais que l'input occupe l'espace restant (peu importe le mode). Et c'est là où je bloque...

edit : ok, tu peux mettre un min-width sur les items "flex-grow: 1" sur les label, et "flex-grow: 2" sur les inputs mais si tu as plusieurs lignes, tu ne peux pas t'assurer que le tout soit aligné.
Modifié par Yordi (31 May 2018 - 16:33)
Modérateur
Yordi a écrit :
"flex-grow: 1" sur les label, et "flex-grow: 2" sur les inputs

Généralement je met un flex:0 0 Xpx; sur les labels (pour que tout soit aligné) et un flex: 1 1; sur le reste
Bonsoir,
si vous cherchez toujours, il y a quelque chose à creuser avec les mots-clé « auto-fill » et « auto-fit ».
Ils sont bien pratique pour créer des « colonnes » en fonction de la place disponible. Ils « disparaissent » si la place est insuffisante. (Donc le ciblage doit être dynamique…)

Aucune idée du support.

Smiley smile
Modérateur
Merci Zelena, c'est bien auto-fit que j'ai essayé avec mon premier test mais je ne trouve pas la solution pour qu'il y ai maximum une pair "Label/Value" par ligne...
Peut-être tu penses à une autre utilisation ?
Yordi a écrit :
Merci Zelena, c'est bien auto-fit que j'ai essayé avec mon premier test mais je ne trouve pas la solution pour qu'il y ai maximum une pair "Label/Value" par ligne...
Peut-être tu penses à une autre utilisation ?

Mille excuses… Oui, effectivement, « auto-fit » n'est pas approprié : le nombre de colonnes est ici connu à l'avance, c'est « un » ou « deux ».
Et pourquoi pas simplement « grid-template-columns: auto 1fr ».
Après tout, c'est la longueur du label qui va limiter. (Même si, j'imagine, il doit y avoir une longueur minimale pour l'input aussi.)

Smiley smile
Modérateur
@Bazooka, c'est bien l'idée mais il faut que l'input s'ajuste à la taille de container.
@Zelena, si je ne me trompe pas, le template sera toujours en 2 columns dans ce cas, il n'y a pas de passage à la ligne si la place est trop étroite

Merci pour les idées !
Yordi a écrit :
@Zelena, si je ne me trompe pas, le template sera toujours en 2 columns dans ce cas, il n'y a pas de passage à la ligne si la place est trop étroite.

En effet… Smiley confused Euh… désolée. J'ai confondu avec display: table.