Resizing Panels

[Christopher Schipper]

How do I resize a panel so that it fits the size of the content within it?

I am currently in a situation where I have two panels (side-by-side) and I need both of them to resize to match the height of the contents within one of them (i.e. they both need to be at least 400px; although, I assume that I will have to use the sizeY value to resize, so I probably cannot achieve an exact height).

What is the best way to accomplish this?

Thank you,

Chris

[Ashokkumar Balasubramanian]

Hi Christopher, 

 

Good day to you.  

  

You can also utilize the cellAspectRatio property which adjusts the dashboard panel size based on the screen. We have demonstrated different layouts for Dashboard with code snippet in our online samples. Please check it for your reference,  

  

Online sample: https://ej2.syncfusion.com/vue/demos/#/material/dashboard-layout/predefinedlayouts.html 

  

Also you can set the height and width of each individual panel using sizeY and sizeX properties of the Dashboard Layout’s panelModel based on the total columns you wish to render. 

 

Please let us know, if you require any further assistance.  

 

Regards, 

Ashokkumar B. 

[Christopher Schipper]

Ashokkumar Balasubramanian,

Thank you for the information. I have dashboard panels that need to dynamically resize based on the size of the content within them. At one moment a panel may need to be 400px, but the content may change and require the panel to resize to 750px. I am having difficulty determining how to determine the size of the content within the panel and how to accurately map the pixel size of the content to the sizeY property.

Since the sizeY property abstracts how many pixels are in 1 unit of sizeY, I am not sure how to properly resize to a specific height in pixels.

Is there a way to:

1. Determine the height of the content within the panel?
2. Convert pixel height to sizeY units?
3. Dynamically change the height of the panel so that it matches the height of the content within the panel?

Thank you!

Chris

[Ashokkumar Balasubramanian]

Hi Christopher, 

 

The Dashboard Layout is split into subsections of equal size of cells and the total number of cells in each row is defined by using the columns property. The width of each cell will be auto calculated based on the total number of cells placed in a row and the height will be same as its width. So for example, if a parent element is split into 5 equal cells based on the columns property with width of each cell resulting in 100px(Equals to value 1 set in sizeX property), then the height of the cells will also be 100px when the sizeY property value is set as 1. This is how the height of the panels is set. Please check below documentation for more details on this, 

 

https://ej2.syncfusion.com/vue/documentation/dashboard-layout/setting-size-of-cells/#configuring-the-layout 

 

Query – 1: “Determine the height of the content within the panel” 

 

There is no method in the Dashboard Layout to determine the height of the content present within the panel. However, you can access the element using its id from the DOM and determine its height using offsetHeight property. 

 

var panelContent = document.getElementById("panelContent"); 

var panelHeight = panelContent.offsetHeight; 

 

Query – 2 & 3: “Convert pixel height to sizeY units and set height for the panel based on the new content height” 

 

As explained in the top, the height of the panel is set based on its width. So, for example let the initial width and height of the content be 400 px and the sizeX and sizeY for the panels values be 1. If the height of the content is increased to say 750 px then that implies the height is nearly double that of the width, so set the sizeY value of the panel to 2 using resizePanel method. 

 

Since, the new content height is 50px less than 800px(Double of the width) the height of the panel will not be completely adjusted when sizeY value is set to 2. This can be resolved by using the cellAspectRatio property. This property configures the height of the cells based on cell width to height ratio. (cellwidth/cell height ratio) 

 

We have prepared a sample for your reference. In this sample, we have checked the panel content height and width and based on that dynamically modified the height of the panels using resizePanel method on button click.  

 

// Button click event function 

    resizePanel: function(args) { 

        var panelContent = document.getElementById("panelContent"); 

        var panelHeight = panelContent.offsetHeight; 

        var panelWidth = panelContent.offsetWidth; 

        // Calculate the difference between content height and width 

        var diff = Math.round(panelHeight / panelWidth); 

        // this.$refs.defaultLayout.resizePanel(id, sizeX, sizeY) 

        this.$refs.defaultLayout.resizePanel('panel0', 1, diff); 

        this.$refs.defaultLayout.resizePanel('panel1', 1, diff); 

        this.$refs.defaultLayout.resizePanel('panel2', 1, diff); 

    } 

 

Please find the sample below, 

 

http://www.syncfusion.com/downloads/support/forum/145096/ze/dashboard1-95793954  

 

You can also set height and width to 100% for the panel contents which automatically adjusts the content based on the panel. 

 

Please let us know if you have any concerns. 

 

Regards, 

Ashokkumar B. 

[Christopher Schipper]

This is very helpful! Thank you very much. This information may be worth documenting in a section of the Dashboard component documentation for users whose use case requires them to dynamically resize their panels.

Thank you for the in-depth explanation!

[Ashokkumar Balasubramanian]

Hi Christopher, 

 

We are glad to hear that the provided solution worked for you. As per your suggestion, we have planned to showcase this information in our documentation. We will prepare the document and update the changes on Vol 2, SP 1 release.  

 

Regards, 

Ashokkumar B. 

[Christopher Schipper]

Ashokkumar Balasubramanian,

The information you provided was very helpful in understanding how sizing works; however, when I attempted to apply this knowledge to resize my panels, I encountered difficulties.

The template that I used for my :content property of the e-panel actually grew outside of the height of the panel and was not able to resize. When attempting to grab the size of the content within the panel, I always received the same pixel value and thus was never able to resize the panel to fit the content. Looking at how the panel rendered, it seems as if the template component that is rendered as content actually renders on top of the panel as opposed to within it. I believe this is causing the template component to render past the panel and thus does not effect the. offsetHeight property of the panel. Since the templates that I am rendering inside the panels are dynamic and will change in height, I need to be able to resize the panel to fit the content within the template component; however, I am not able to do so due to the .offsetHeight property not taking into account the content within the :content property of the panel. 

How do I supply the :content key a template component such that it will render the template within the panel as opposed to on top of it? Without being able to do this, I do not see how I would be able to dynamically resize the panel. Additionally, how do I render content within the panel such that calling the .offsetHeight property of the panel will give me the true height of the elements within it?

Below is a code example of the template component that I am using and an image demonstrating how it is rendered:

Code Example:

Panel code:

<e-panel

id="testPanel"

v-if="'true'"

:row="0"

:col="4"

:sizeX="8"

:sizeY="3"

header="<div class='e-header-text'>Test Panel</div><div class='header-border'></div>"

:content="testPanelTemplate">

</e-panel>

testPanelTemplate code:

<template>

<div style="display:block; width:100%; height:100%;">

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

<p>test</p>

</div>

</template>

<script>

export default {};

</script>

Rendered e-panel with above template set as the :content property:

Thanks,

Chris

[Christopher Issac Sunder K]

Hi Chris, 

We checked your reported issue and this can be resolved by removing the height and width property set to 100% in the content div element. This is because if you set 100% to the content’s div element, then it will only consider the height of the panel and not the contents inside it. So, even if the panel’s content exceeds the panel container this height will not be recorded in the offsetHeight property. When rendering custom components like Grid, Chart, etc inside the Dashboard Panel then setting 100% height and width to it will adjust the content with respect to the panel on resizing. But if you render div elements inside the panels then you need to provide the required height and width for them and set the panel’s sizeX and sizeY properties based on that. Then when the content gets updated, you can calculate the offsetHeight as mentioned in our previous update and resize the panels according to that. 

For your reference we have modified the sample we previously provided. Please find it below, 

Sample: http://www.syncfusion.com/downloads/support/forum/145096/ze/Dashboard1-1436162592  

Let us know if you have any concerns. 

Thanks, 

Christo