Affichage des éléments de la classe "input-group-append" sur plusieurs lignes

[Abed]

Bonjour,

Suite au post : Problème d'affichage avec le datetimepicker
tous nos champs, possédant plusieurs éléments de la classe “input-group-append”, ne sont plus alignés :

En attendant la V5.3 (qui réglera ce pb si j’ai bien compris), est-ce qu’il y a une solution temporaire ?

Merci d’avance.
Abed.

[Platform]
Status=OK
Version=5.2.21
BuiltOn=2022-10-30 17:15
Git=5.2/86561eab294f9a89eabc170c06794abdc7b7ded1
Encoding=UTF-8
EndpointIP=149.202.173.228
EndpointURL=http://e3m.simplicite.io:10118
TimeZone=Europe/Paris
SystemDate=2022-10-31 09:34:29

[FlorentGN (Florent GAUDIN)]

Bonjour,

J’ai également le même problème avec la version 5.2.21 :

[FlorentGN (Florent GAUDIN)]

Cette régle CSS semble corriger le problème :

.input-group-append, .input-group-prepend {
	.input-group-text, button {
	    display: inline-flex;
	    vertical-align: middle;
	    align-items: center;
	    height: 100%;
	}
}

[Francois (François Genestin)]

Problème non reproduit sur la démo

Il a été nécessaire de passer .input-group-append en display:block au lieu d’un flex-box, pour éviter la superposition des boutons sous un datetime-picker.

Les boutons bootstrap .btn sont en display inline-block; donc ils s’alignent bien par la droite.
Le pb se situe sur le bouton d’aide qui utilise une autre classe :
input-group-text qu’il faut passer en inline display: inline-block; ou en flex comme proposé par @FlorentGN .

ce sera ajouté au prochain build.

[bmo (Bruno Montagnac)]

Bonjour @Francois, il semblerait que le problème concerne aussi d’autres cas comme le bouton “open fullscreen” (avec ou sans le patch proposé).

[Platform]
Status=OK
Version=5.2.21
BuiltOn=2022-10-31 18:50
Git=5.2/9440a702644f55a95fa7dc0e9370b7c2b61f61ce
Encoding=UTF-8
EndpointIP=149.202.171.75
EndpointURL=http://renault.simplicite.io:10408
TimeZone=Europe/Paris
SystemDate=2022-11-02 15:04:24

[Application]
ApplicationVersion=1.0.0
ContextPath=
ContextURL=https://rfi.renault.simplicite.io
ActiveSessions=2
TotalUsers=9
EnabledUsers=5
LastLoginDate=2022-11-02 15:00:23

[Francois (François Genestin)]

Merci Bruno, un train en cache donc plusieurs. je pensais avoir fait le tour…
on va corriger ce bouton qui ne doit pas avoir la bonne classe.

[Francois (François Genestin)]

en fait, le bouton est correct, par contre le composant ACE EDITOR est forcé en 100% pour prendre le plus de place possible en largeur, et ça manquait de place à droite pour les boutons “inline”.

La soluce c’est d’ajouter un nowrap aux blocks maitenant qu’on est plus en flex-box :

.input-group-append, .input-group-prepend {
	display: block;
	white-space: nowrap;
}

Livraison à suivre…