CSS Grid

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)

Salut !

Je suis pas sur de bien tout avoir compri... est-ce que ce comportement se rapproche de ce que tu veux ? https://jsfiddle.net/undless/cv3vdm5y/

PS : Depuis longtemps, à chaque fois que je vois ton pseudo ici j'ai ça dans la tête : https://youtu.be/T7seDQ-rPxk?t=25s

Je tente un coup de bluff : https://jsfiddle.net/undless/cv3vdm5y/1/

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

Le bluff ne fonctionne évidement pas et la solution d'avoir une valeur en px sur le flex-basis du label est aussi bof bof je trouve...

Je suis peut-être compliqué et je ne sais pas si c'est faisable mais la solution qui se rapproche le plus est pour le moment avec grid et son minmax() (que je trouve super pour s'adapter au mieux à la longueur des labels) mais je ne trouve le bon automatisme...

D'après le site de Mozilla, ces options sont expérimentales voire pire :
https://developer.mozilla.org/fr/docs/Web/CSS/:-webkit-autofill
https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content
Sur caniuse.com, il n'y a aucune réponse aux recherches.
Donc à utiliser avec beaucoup de prudence
Merci d'avoir essayé

Bonjour,

il s'agit bien du mot-clé « auto-fit » et non « fit-content ».
Quant à « auto-fill », il ne s'agit pas d'une pseudo-classe, mais encore une fois d'un mot-clé.
Les deux s'utilisent dans la description des grilles. Ainsi :

https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/
https://gridbyexample.com/video/series-auto-fill-auto-fit/
(Ah, en anglais, pas étonnant que ce soit si peu connu…)

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 ?

@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 !

Ok, ça m'a donné des idées, voilà une autre version mais la taille du label n'est pas aussi smart qu'avant