Centre visualize.js div Sommaire à la page

J'ai essayé d'obtenir un rapport que nous avons construit avec jasperreports et rendu via visualize.js pour être centré horizontalement sur une page (quelles que soient les dimensions de la page ou du navigateur).Centre visualize.js div Sommaire à la page

Mon code actuel est:

<!DOCTYPE html> 
<html> 
<head> 

<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.5.1/mootools-core-full-compat.min.js"></script> 

<script type='text/javascript'> 
    window.addEvent('load', function() { 
    visualize({ 
     auth: { 
     name: "joeuser", 
     password: "joeuser", 
     organization: "organization_1" 
     } 
    }, function(v) { 
     //render dashboard from provided resource 
     v("#container").report({ 
     resource: "/public/Samples/Reports/06g.ProfitDetailReport", 
     scale: "container", 
     error: handleError 
     }); 

     //show error 
     function handleError(err) { 
     alert(err.message); 
     } 

    }); 

}); 

</script> 

<style> 
     html, 
     body { 
      height: 100%; 
      width: 100%; 
      margin: 0 auto; 
      background-color: #000000; 
     } 

     #container { 
      display: block; 
      width: 100%; 
      height: 100%; 
      border: 0px; 
      margin: 0 auto; 
      background: blue; 
     } 
</style> 

</head> 

<body> 

<div id="container"></div> 

</body> 

</html>

Le violon suivant annonciez la question actuelle: https://jsfiddle.net/g207h68x/

Si vous redimensionnez la fenêtre de résultat, vous pouvez voir que le rapport est mis à l'échelle (via le scale: entrée "container" dans la fonction render à gauche de l'écran

Je ne peux pas utiliser de tailles spécifiques pour le <div> car chaque tableau de bord a ses propres dimensions sur ce qui est affiché dans le rapport ou le tableau de bord (certains peuvent être de 300x500 et d'autres de 1920x1080).

J'ai essayé d'envelopper le <div> à l'intérieur des flexboxes qui ne semblaient pas aider ... à moins que je ne le faisais pas correctement (entièrement possible).

Une autre approche consistait à essayer d'imbriquer la div dans une div parente, mais cela ne semblait pas fonctionner non plus (encore une fois, je ne l'ai peut-être pas fait correctement non plus).

J'ai également essayé de faire du <div> un bloc en ligne, mais cela semble déranger complètement la mise à l'échelle pour visualize.js lorsqu'il lit les dimensions du conteneur (je pense).

J'ai regardé dans la documentation de visualize.js, mais il n'y a vraiment pas grand-chose pour le dimensionnement dynamique et l'espacement sur la page.

J'ai même essayé de mettre le <div> dans une table ... mais cela n'a pas semblé aider car les cellules du tableau ne traverseraient que la page ou le conteneur. J'ai lu quelque part que l'interface utilisateur JQuery peut être utilisée pour manipuler davantage ce que visualize.js est en train de faire, mais je n'ai trouvé aucun exemple ou référence sur l'endroit où cela a été documenté.

Si quelqu'un sait comment centrer ce type de contenu, j'apprécierais grandement votre contribution.

Merci d'avance.

Source

2017-05-01 Buckwheattb

Le centrage ne fonctionne pas dans votre jsfiddle car le rapport est mis à l'échelle dans le conteneur et son transform-origin est défini en haut à gauche. Pour surmonter la plupart des problèmes, j'ai trouvé le script suivant basé sur celui que vous avez posté.

L'idée principale est d'ajouter des marges à la table « .jrTable » avec l'événement beforeRender, puis d'intercepter le CSS transform-origin à l'intérieur visualize.js et définir la nouvelle.

Veuillez noter que ce script n'est pas complet et ne fonctionne pas avec certaines configurations de fenêtres étroites. Je ne l'ai pas non plus exécuté sur un tableau de bord. Vous devrez décider quand définir cette nouvelle origine en fonction de certaines mesures. De plus, le cssHook de jQuery nécessitera probablement des ajustements pour les différents préfixes du fournisseur si vous avez l'intention de cibler d'autres navigateurs. Je l'ai testé seulement dans Chrome et Safari avec celui par défaut. Plus d'infos sur jQuery cssHooks.

EDIT: Il semble que la solution initiale basée sur la modification de la marge et la transform-origin produit des résultats imprévisibles et ne correctement pas à l'échelle dans tous les cas. Gardez-le pour référence here, cependant.

De meilleurs résultats peuvent être atteindre simplement en ajustant le décalage après la transform-origin est appliqué:

window.addEvent('load', function() { 
 

 
    var hookRegistered = new $.Deferred(); 
 
    var $container = $("#container"); 
 
    
 
    function adjustPageOffset($jrPage) { 
 
    var pageWidth = $jrPage[0].getBoundingClientRect().width, 
 
     containerWidth = $container.width(); 
 

 
    (pageWidth<containerWidth) ? $jrPage.offset({left:(containerWidth-pageWidth)/2}) : $jrPage.offset({left:0}); 
 
    } 
 

 
    __visualize__.require(["jquery"], function($) { 
 
    $.cssHooks["transformOrigin"] = { 
 
     set: function(elem, value) { 
 
     elem.style["transformOrigin"] = value; 
 
     
 
     if ($(elem).is(".jrPage") && "top left" === value) { \t \t \t \t 
 
      adjustPageOffset($(elem)); 
 
     }   
 
     } 
 
    }; 
 
    
 
    hookRegistered.resolve(); 
 
    }); 
 

 
    // wait for the hook to register in visualize's embedded jQuery 
 
    // then load the report 
 
    hookRegistered.then(function() { 
 
    visualize({ 
 
     auth: { 
 
      name: "joeuser", 
 
      password: "joeuser", 
 
      organization: "organization_1" 
 
     } 
 
    }, function (v) { 
 
     //render dashboard from provided resource 
 
     v("#container").report({ 
 
      resource: "/public/Samples/Reports/06g.ProfitDetailReport", 
 
      scale: "container", 
 
      error: handleError 
 
     }); 
 

 
     //show error 
 
     function handleError(err) { 
 
      alert(err.message); 
 
     } 
 

 
    }); 
 
    }); 
 
});

Et modifié jsfiddle.

Source

2017-05-02 13:37:06 Narcis

Merci Narcis ... y a-t-il un moyen de modifier cela pour le rendre un peu plus réactif? si vous redimensionnez le volet des résultats, vous pouvez voir que le contenu ne reste pas vraiment centré ... il sorte de sucer vers la droite .. – Buckwheattb

J'ai édité ma réponse avec la solution révisée. J'espère que cela aide! – Narcis

C'est fantastique ... exactement ce dont j'avais besoin. Je l'ai également testé dans IE et Edge ... fonctionne très bien à partir de ce que j'ai vu. Merci beaucoup! – Buckwheattb

Centre visualize.js div Sommaire à la page

Répondre

Questions connexes