1. Home
  2. Forum
  3. React - EJ 2
  4. Not able to get dynamic height and width for the gauge.

Not able to get dynamic height and width for the gauge.

Hi,

I think I'm missing something when it comes to getting the code properly. When I try to go from one screen size to another, the gauge does not set its width and height to the parent container. As the parent component for CircularGaugeComponent, I'm utilizing a grid system. I'm using the MUI Grid structure for the grid layout, and I've set the CircularGaugeComponent's height and width to 100%. However, when I go to different screen sizes, everything is off-screen or very little. Also, if I maintain three in the grid, I can only see the last one.

PFA for Images.

Thank You!!


Attachment: SS_Forum_9e0ab2b3.zip

3 Replies
IR Indumathi Ravi Syncfusion Team February 25, 2022 02:19 PM UTC

Hi Satyam, 
  
Thank you for contacting Syncfusion support. 
  
We are unable to reproduce the reported issue in the Circular Gauge component that use the provided scenario. We made a simple sample using the MUI Grid. Please see below for a sample in which we tried to replicate the reported issue. 
   
Sample Link:  
 
Can you please try the below solution by setting the size via inline or CSS as demonstrated below? 
 
Code Snippet: 
<CircularGaugeComponent  style={{ height: '100%', width: '100%' }}> 
//.. 
//.. 
</CircularGaugeComponent> 
 
If you are still having problems, please modify the above sample (provided in the stackblitz) in-order to reproduce the reported issue and send it to us. It will help us in analyzing and assisting you further. 
   
Regards, 
Indumathi R.

SA Satyam March 3, 2022 05:17 PM UTC

Hi Indumathi,


Thank You for your response.


Your solution worked perfectly for me. However, there is one minor stumbling block: the height. The height of the component is fixed in some way; I tried adjusting the parent height while keeping the component at 100% height and width, but it didn't affect the height of the component.

Everything else is perfect.


Regards, 

Satyam


IR Indumathi Ravi Syncfusion Team March 5, 2022 01:49 AM UTC

Hi Satyam, 

Thank you for the update. 

We found that the MUI grid does not renders with proper height. So the Circular Gauge renders with a default height of “450px” because the parent element height is “0”. When the Circular Gauge is removed from the MUI Grid, the Grid is rendered as the below image. This shows that the height CSS style is not available in the MUI Grid elements.  

 
We can resolve this by initializing the Circular Gauge within a HTML div element. The height CSS style must be set in the div element and height CSS style of the Circular Gauge component must be set as “inherit”. Now the Circular Gauge will be rendered with the parent element’s height. Please find the code snippet for the same below. 

Code Snippet: 
<div style={{height: '600px'}}> 
<CircularGaugeComponent  style={{ height: inherit' }}>  
//..  
//..  
</CircularGaugeComponent>  
</div> 

We have modified the sample to demonstrate the same and it can be found from the below link. 

Please let us know if you need any further assistance. 

Regards, 
Indumathi R

Loader.
Up arrow icon