react-toolkit icon indicating copy to clipboard operation
react-toolkit copied to clipboard

The width of an input doesn't match with his container

Open johnmeunier opened this issue 4 years ago • 3 comments

Issue and Steps to Reproduce

Set the classNameContainerInput on a form component with a bootstrap grid class or just change the with of the input container.

Versions

My current version : 1.4.0-alpha.0

Screenshots

Capture d’écran 2020-12-01 à 08 36 52 Capture d’écran 2020-12-01 à 08 37 04 Capture d’écran 2020-12-01 à 08 37 17 Capture d’écran 2020-12-01 à 08 37 26

Expected

When I set the classNameContainerInput of a form component with a bootstrap grid class, the input width should match

Actual

When I set the classNameContainerInput of a form component with a bootstrap grid class, the input width doesn't change

Additional Details

It seems easy to solve this problem, for an input text, you just have to add :

.af-form__input-text {
    width: 100%;
}

johnmeunier avatar Dec 01 '20 07:12 johnmeunier

@djaumes ou @Xym618, qu'est ce que vous pensez de ça ? Pour résumer @johnmeunier , tu me dis si je me trompes, mais c'est que l'input de prendre tout l'espace qu'on lui set. Ce qui ne semble pas le cas aujourd'hui

arnaudforaison avatar Jan 21 '21 10:01 arnaudforaison

Exactement !

johnmeunier avatar Jan 21 '21 10:01 johnmeunier

Proposer plusieurs formats de champs (S,M,L, 100%) adaptés à des usages différents? S: Dates; M: Nom, Prénom; L: Adresse; 100%: Phrase.

L'UX choisit au moment de la conception le format de champ le plus adapté, le dev n'a plus qu'à reprendre la bonne taille dans la bibliothèque, sans surcharge.

djaumes avatar Jan 21 '21 13:01 djaumes