Center visualize.js div content on page

我一直在試圖獲得一份報告，我們已經使用jasperreports構建了一個報告，並通過visualize.js呈現爲在頁面上水平居中（無論頁面或瀏覽器的維度如何）。Center visualize.js div content on page

我當前的代碼是：

<!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/

如果調整結果窗口中，可以看到，隨着報告的比例（通過縮放比例：「容器」條目在渲染功能中粘貼在屏幕左側

我不能使用<div>的任何特定尺寸，因爲每個儀表板都有其獨特的尺寸。報告或儀表板中顯示的內容（某些可能是300x500，其他可能高達1920x1080）。

我試圖將<div>包裝在柔性盒內部，這似乎沒有幫助..除非我沒有正確地做（完全可能）。

另一種方法是試圖在父div中嵌套div，但那似乎不起作用（再一次，我可能還沒有正確地完成它）。

我也嘗試使<div>成爲一個內聯塊，但這看起來完全放棄了visualize.js的縮放，因爲它讀取容器維度（我認爲）。

我查看了visualize.js文檔，但實際上沒有太多的動態大小和頁面間距。

我甚至試圖把<div>放在一個表格中......但是這似乎沒有幫助，因爲表格單元會跨越頁面或容器。

我的確在某處讀過JQuery UI可以用來進一步操縱visualize.js正在做什麼，但是我找不到任何有關記錄位置的示例或引用。

如果有人知道如何集中這種類型的內容，我將非常感謝您的意見。

預先感謝您。

來源

2017-05-01 Buckwheattb

居中在你的jsfiddle中不起作用，因爲報告在容器內縮放並且其transform-origin被設置爲左上角。爲了克服大部分問題，我根據您發佈的腳本提出了以下腳本。

主要想法是在beforeRender事件中向「.jrTable」表中添加一些邊距，然後從visualize.js中攔截CSS transform-origin並設置新的邊界。

請注意，這不是一個完整的腳本，並不適用於一些狹窄的窗口設置。我沒有在儀表板上運行它。您必須根據一些測量結果決定何時設置此新的原點。此外，如果您打算針對其他瀏覽器，jQuery的cssHook可能需要針對不同的供應商前綴進行調整。我只在Chrome和Safari中使用默認的測試。更多關於jQuery cssHooks的信息。

編輯：似乎最初的解決方案基於改變邊距和transform-origin產生不可預知的結果，並且在所有情況下都不能正確縮放。不過，請將它保留作爲參考here。

更好的結果可以只通過調節施加transform-origin後的偏移來實現：

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

 
    }); 
 
    }); 
 
});

而改性jsfiddle。

來源

2017-05-02 13:37:06 Narcis

感謝Narcis ...有沒有一種方法可以修改它使其更具響應性？如果你調整結果窗格的大小，你可以看到內容並沒有真正保持居中......它有點糟透了...... – Buckwheattb

我已經用修改過的解決方案編輯了我的答案。希望能幫助到你！ – Narcis

這真是太棒了......正是我所需要的。我也在IE和Edge中測試了它...從我所見過的很好的工作。非常感謝！ – Buckwheattb

Center visualize.js div content on page

回答

相關問題