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

Support
1

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 :

image
image818×149 3.02 KB

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

2

Bonjour,

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

image
image1559×319 25.9 KB

3

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%;
	}
}

image
image1581×312 24.1 KB

4

Problème non reproduit sur la démo

image
image715×297 5.62 KB

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.

image

image

5

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

image
image1910×693 65.7 KB 

[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
6

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.

7

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…