Align Panel Height to Card Height

[mdvenoms]

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.

[mert.sincan]

I think you can use primeflex feature. Please see; https://www.primefaces.org/showcase/ui/ ... Grid.xhtml

Best Regards,

[mdvenoms]

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:

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>

[mert.sincan]

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>