PrimeFaces 对话框中的传单地图渲染不正确

Question

Try to input Leaflet map into PrimeFaces Dialog. And I have a issue with incorrect rendering. Map has incorrect position, looks like map start positioning relative to index.html not to the Dialog. The next issue: size is incorrect. The same code outside the dialogue works fine. How to change this?

<h:head>      
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
    </h:head>
    <h:body>
        <ui:composition> 
            <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>           
            <p:dialog  id="map" header="Mapa:" widgetVar="wigetMapDialog" height="800px" width="1200px" showEffect="clip" hideEffect="clip" resizable="false" closable="true" dynamic="true" modal="true">               
                <div id="mapid" style="width: 1180px; height: 780px;"></div>  
                <script>
                    var mymap = L.map('mapid').setView([50.9547215, 16.9126256], 18);
                    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                                attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                    }).addTo(mymap);
                </script>
            </p:dialog> 
        </ui:composition>
    </h:body>     
</html>

My Dialog:

When I move map inside:

Answer 1

You most likely have two problems.

1. The first one being that everything outside a ui:composition is ignored
2. Every non visible ( display: none ) html element has no width when retrieved with javascript

The first issue can be solved by adding the css inside the ui:composition . The second one, getting the dimensions of a non-visible PrimeFaces (with display: none in the relevant rendered html code) is not (easily) solveable via the way mentioned in the link above. This is the case with many frameworks, so other frameworks, like mentioned by @IvanSanchez, often have methods to recalulate the dimensions when something is shown. So should call the mentioned invalidateSize() in the p:dialog onShow="..." like

<p:dialog ... onShow="mymap.invalidateSize()">

...
</p:dialog>

might solve the issue (disclaimer: not tried this, no computer at hand to try it)

Answer 2

This i my solution:

<script type="text/javascript">
       jQuery(document).ready(function ($) {
       mymap.invalidateSize();});
</script>

Thank you for a hint.