jasperreports で作成し、visualize.js を介してレンダリングしたレポートを、ページの水平方向の中央に配置しようとしています (ページまたはブラウザーのサイズに関係なく)。
私の現在のコードは次のとおりです。
<!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>
次のフィドルは現在の問題を示しているはずです: https://jsfiddle.net/g207h68x/
結果ウィンドウのサイズを変更すると、レポートがスケーリングされていることがわかります (render 関数の scale:"container" エントリを介して、レポートは画面の左側に固定されます)。
レポートまたはダッシュボードに表示される内容に応じて、各ダッシュボードに固有のサイズがあるため、特定のサイズを使用することはできません<div>(300x500 のものもあれば、最大 1920x1080 のものもあります)。
フレックスボックスの内側をラップしようとしましたが、<div>うまくいかないようでした..正しく実行していない限り（完全に可能です）。
別のアプローチは、親 div 内に div をネストしようとすることでしたが、それもうまくいかないようでした (繰り返しますが、正しく実行していない可能性もあります)。
私も<div>インラインブロックを作成しようとしましたが、それはコンテナの寸法を読み取るため、visualize.jsのスケーリングを完全に無効にしているようです(私は思います)。
私は、visualize.js のドキュメントを調べましたが、動的なサイズ変更とページの間隔についてはあまり説明がありません。
テーブル内に配置しようとさえしました<div>...しかし、テーブルのセルがページまたはコンテナ全体にまたがってしまうため、それは役に立たなかったようです。
JQuery UIを使用してvisualize.jsの動作をさらに操作できることをどこかで読みましたが、それが文書化されている場所に関する例や参照は見つかりませんでした。
この種のコンテンツを中央に配置する方法を知っている方がいらっしゃいましたら、ご意見をいただければ幸いです。
前もって感謝します。