Hi everyone
In older themes / templates it was possible to align the height of panel to the height of another panel (e.g., using style="height: 100%") within dashboards.
Is there a way to achieve the same result using Babylon? Lets say we have a dashboard (two columns), on the left there s a card (height is dynamic) and on the right there is a panel.
Now how can I define the height of the panel, so that it fits to the height of the card. Setting both heights to 100% via style doesn't seem to work.
Thank you very much.
Align Panel Height to Card Height
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
I think you can use primeflex feature. Please see; https://www.primefaces.org/showcase/ui/ ... Grid.xhtml
Best Regards,
Best Regards,
Github Profile: https://github.com/mertsincan
Hi aragon
Thank you for your response, I tried a couple of combinations but the heights do not align (are not equal).
Do you have any ideas how to solve it?
PoC:
Thank you for your response, I tried a couple of combinations but the heights do not align (are not equal).
Do you have any ideas how to solve it?
PoC:
Code: Select all
<div class="p-grid p-align-stretch vertical-container">
<div class="p-col-8">
<div class="card card-w-title">
<h1>Title 1</h1>
<p:timeline id="timeline"
value="#{backing1.timeline}"
var="run"
height="auto"
selectable="true"
zoomable="true"
moveable="true"
stackEvents="true"
axisOnTop="false"
eventStyle="box"
showCurrentTime="true"
showNavigation="false"
zoomMin="86400000"
zoomMax="31536000000">
</p:timeline>
</div>
</div>
<div class="p-col-4">
<p:panel header="Title 2" footer="Footer">
...
</p:panel>
</div>
</div>
-
- Posts: 5281
- Joined: 29 Jun 2013, 12:38
You need to set height value to panel and panel-container to solve this issue. Also, please see;
Code: Select all
<div class="p-grid p-align-stretch vertical-container">
<div class="p-col-8">
<div class="card card-w-title" style="height:100%;">
<h1>Title 1</h1>
<p:timeline id="timeline"
value="#{basicTimelineView.model}"
var="run"
height="auto"
selectable="true"
zoomable="true"
moveable="true"
stackEvents="true"
axisOnTop="false"
eventStyle="box"
showCurrentTime="true"
showNavigation="false"
zoomMin="86400000"
zoomMax="31536000000">
</p:timeline>
</div>
</div>
<div class="p-col-4">
<div class="card card-w-title" style="height:100%;">
<p:panel header="Title 2" footer="Footer">
şlaksdlşaslşdkaslşdşlaskdlşkaslşd
</p:panel>
</div>
</div>
</div>
Github Profile: https://github.com/mertsincan
-
- Information
-
Who is online
Users browsing this forum: No registered users and 7 guests