Issues with Leaflet integration into UltimaNG 1.0.2

[centai]

I want to integrate a simple Leaflet map within the UltimaNG. I used the empty template and just created a panel with the div for the map inside.

Code: Select all

<p-panel header="Map" [toggleable]="false">
    <div id="mapid"></div>
</p-panel>

I create the map in the ngOnInit method.



I am facing 3 issues right now:

1. The menu for the profile on the top bar is behind the map. Is there an option to have the horizontal menus always in front?

2. Is there a simple way that <p-panel> will use all available height on the screen without scrolling? height: 100% does not work, I can think of height: calc(100vh - ?px), but maybe there is a better way

3. Is there an option to have the padding inside the <p-panel> disabled? padding: 0px; does not work, because it is rendered as several nested components.

[cagatay.civici]

1) I think leaflets has z-index set as 400 and topbar is 100. One solution is setting topbar to 401 or setting leaflet-pane to 99;

Code: Select all

.layout-container .topbar {
   z-index: 401;
}

2-3) Define a class like full-panel;

Code: Select all

<p-panel styleClass="full-panel"

Code: Select all

.full-panel.ui-panel ui-panel-content{
   height: 100vh;
   padding: 0;
}

[centai]

Thank you for the fast answer. It worked for me, I had to subtract the height of the header that the panel would fit into the rest of the screen. I guess it is not possible by just defining height: 100% somewhere?
Also for the padding I had to use !important, otherwise the setting was not applied. Is there also an option without !important?

Code: Select all

.full-panel.ui-panel .ui-panel-content {
    height: calc(100vh - 165px);
    padding: 0 !important;
}

[DarthMaul]

Try with this one

Code: Select all

.full-panel.ui-panel.ui-widget .ui-panel-content.ui-widget-content {
    height: calc(100vh - 165px);
    padding: 0;
}