Agrandir la zone d'affichage d'un objet métier en vue facette

[dagry (Hervé Dagry)]

Description

Je souhaite agrandir la zone d’affichage d’un objet métier en vue facette

Etapes pour reproduire

J’ai reproduit ce qui est décrit ci-dessus sur une instance Simplicité à jour et les étapes pour reproduire sont les suivantes:

1. Dans le front j’ai ajouté ce script:

(function(ui) {
    var app = ui.getAjax();
    Simplicite.UI.hooks.FondsSynthese = function(o, cbk) {
        try {
            if (o.isHomeInstance()) {
            	
            	o.locals.ui.list.onload = function(ctn, obj) {  
            	//	ui.alert(app.T("bonjour"));
            		
            	
            	};
            	
                var p = o.locals.ui; // copy of Globals
                p.list.minified = true; // minified by default
                p.list.minifiable = false; // no toggle list/mini
                p.list.layout =  p.summary.layout = "inline"; // masonry, inline or float
                p.summary.maxFields = 20;// only the 5 first fields
           //   p.summary.fields = [ "SyntMontantCpie", "SyntDonVerse"]; // or exactly thoses fields...
                p.summary.template = // to draw something else with the same classes to fill
		'<div class="obj-summary">' +
			'<div class="obj-body">' + // open => openObject
				'<div class="title">' +
					'<span class="obj-icon"></span>' + // object icon
					'<div>' +
						'<h4 class="obj-title"></h4>' + // object label
						'<h5 class="obj-label"></h5>' +  // userkey label
					'</div>' +
				'</div>' +
				'<div class="image">' +
					'<img class="obj-image"/>' + // optional image
				'</div>' +
				'<div class="obj-fields"></div>' + // optional fields
				'<div class="obj-addons"></div>' + // optional addons
			'</div>' +
			'<div class="obj-actions"></div>' + // row actions
		'</div>';
            }
        }
        catch(e) {
            app.error("Error in Simplicite.UI.hooks.myObject: "+e.message);
        }
        finally {
            cbk && cbk();
        }
    };
})(window.$ui);

2. j’ai également ce code de la ressource Styles :

.obj-summary .obj-fields > ul > li > span {
   font-size: 1.2rem;
}
.obj-grid {
    display: block !important;
    height: auto !important;
    overflow-x: hidden;
    overflow-y: auto;
}
.obj-grid .obj-grid-item {
    position: relative !important;
    display: inline-block !important;
    float: none;
    width: 30% !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0; 
}

Information techniques

/health de l'instance

---Simplicité version4.0 patch level P25Built on2022-02-22 00:16 (revision 39f36d20ad611794a99815948a8f09f3bd7c4e19)Database level4.0;P25;77c6ba460e020286465c768ddbcadca1EncodingUTF-8 (system encoding UTF-8)
OSLinux amd64 3.10.0-1160.42.2.el7.x86_64ServerApache Tomcat/9.0.58 of type WEBUsertestDatabasePostgreSQL 9.2.24 using BLOBs
JVM11.0.12 Red Hat, Inc. OpenJDK 64-Bit Server VM 11.0.12+7-LTSScript enginerhino Rhino 1.7.13 2020 09 02Additional libsApache POI, Docx4j, Apache Tika, JGit, Apache JClouds, Google APIs, Google APIs Firebase
Application nameContext URLhttps://lowcode01-test.lausanne.chEnd-pointhttp://lsllcot01.lausanne.ch:8080Time zoneEurope/Zurich---

Logs Simplicité

---copier ici les logs serveur **pertinentes**---

Logs du navigateur

---copier ici les logs navigateur **pertinentes**---

Autres informations pertinentes

----Ex: indiquer le type de dépliement, le type et la version du navigateur, etc.----

[dagry (Hervé Dagry)]

Merci David pour la mise en forme de la demande.
En complément je joins cette image.
C’est l’agrandissement dans le sens de la hauteur qui me concerne, j’ai pu le faire dans le sens de la largeur…

[david (David AZOULAY)]

@dagry

Merci David pour la mise en forme de la demande.

Pas de quoi => pour la mise en forme de code sur plusieurs lignes il faut utiliser des blocs Markdown entre triples backticks + le type sinon c’est illisible.

[Francois (François Genestin)]

Bonjour,

@dagry

.obj-grid .obj-grid-item {
    position: relative !important;
    display: inline-block !important;
    float: none;
    width: 30% !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0; 
}

Tel que ce CSS est écrit ça va agrandir toutes les miniatures de toute la plateforme.
De plus le type “inline” est déjà paramétré pour fonctionner en inline-block, il ne faut pas écraser les layout “masonry” ou “float”.

Essayez de surcharger les tailles des miniatures de votre liste uniquement comme suit :

.objlist.object-FondsSynthese .obj-summary {
  width: 30% !important;
  min-height: 30rem !important;
}

.objlist.object-FondsSynthese .obj-summary .obj-fields > ul > li > span {
   font-size: 1.2rem;
}

Sinon retirer l’overflow-y du .obj-fields