Maitrise de la taille des colonnes quand édition d'une liste

4.0
Maitrise de la taille des colonnes quand édition d'une liste
0
Tags: #<Tag:0x00007f4a08178ac8>
#1

Bonjour,

Je veux permettre aux utilisateurs de mettre à jour les heures de formation suivies par des stagiaires.
j’ai donc créé un objet dans lequel seules les heures réalisées sont saisisables.

image
image.png1567×290 12.7 KB

En consultation, la taille des colonnes affichées dépend du contenu et ça me va très bien.

Par contre, quand on édite la liste pour la modifier, la taille des colonnes change : toutes les colonnes font la même taille alors que le contenu ne le justifie pas.
Par exemple, la colonne mois est un entier de 2 donc aucun intérêt de prendre autant de place à l’écran.

image
image.png1560×333 14.1 KB

Ma question : comment faire pour qu’en mode édition, les colonnes gardent leur format afin d’éviter des ascenseurs verticaux inutiles et de la perte de place ?

(François Genestin) #2

Bonne remarque, il doit y avoir un CSS avec un min-width forcé.
On va regarder pour améliorer la largeur en fonction de la taille du champ en édition de liste.

Il est possible de faire du spécifique par hook client, mais ce n’est pas la bonne approche sauf si c’est un besoin urgent.

#3

ça dépend si fin février est considéré comme urgent :)

(François Genestin) #4

Pour faire rapidement et sans hook compliqué, il faut ajouter une ressource “STYLES” CSS sur votre objet pour retirer la largeur forcée et spécifier colonne par colonne leur taille, exemple pour la 3eme colonne :

.objlist.object-MyObject .form-group {
  min-width: auto !important; 
}
.objlist.object-MyObject table>tbody>tr>td:nth-child(3) {
  width: 50px;
}
(scampano) #5

De mon côté j’ai préféré utiliser le data-group, car nth-child n’est pas vraiment digne de confiance à cause des champs cachés et des potentiels changements d’ordre:

.objlist.object-MyObject .form-group {
  min-width: auto !important; 
}
.objlist.object-MyObject [data-group="attributeApiName"] input{
	width: 60px;
}
(François Genestin) #6

Oui c’est mieux de cibler avec le nom du champ, pensez aussi à mettre des !important si besoin.

Sinon l’évolution a été poussée sur le master (P23) pour que les colonnes soient dimensionnée en fonction de leur taille en édition. Ce ne sera pas exactement la même taille qu’en lecture car il y a les boutons (recherche, aide, datepicker…) et du padding en plus, mais ce sera déjà plus ergonomique.