Circular Gauge won't fill parent with height = 100% and width = 100%

Question

I am trying to make a Blazor component to reuse on another page. And I added a parameter that just wraps the Height parameter of the circular gauge. The problem is that when I use my component on another page (to avoid rewriting the same code for every gauge I need) the gauge won't use the height of the container, it will default to the 450 height.

Any idea how to make this work? I have uploaded the offending code. Thank you!

Attachment: WaterTemperatureGauge_4c3aa4b0.zip

Swetha Babu · Accepted Answer

Hi Enrique, 
  
Thank you for the update. 
  
Please find the details for your queries from the below table. 
  




Query 

Details 


<WaterTemplateComponent> height needs to be 600px 

We have checked your query. We can use the parent element style to render the circular gauge with height and width as "100%". This gets the parent element height and width and renders the gauge. In the below sample we provided, we have made the circular gauge component as shared component and set 100% height and width to the shared component. So parent element in other files will provide size to the circular gauge. We have created the simple application to demonstrate the same and it can be downloaded from the link below the table. 
In our provided sample, we have created the parent element height as 600px and then provided the component height as 100%. In the “CircularGaugeHeight” file, we have rendered the gauge with height 600px. We have created the parent element with height as 600px and the “WaterTemperatureGauge” component height as 100% 


each gauge is in its own parent div set to a height and width of 200px 

When we set the circular gauge with 100% height, we are unable to reproduce the reported issue of gauge gets cut when we provide the height as 200px. In the “Circulargauge” razor file of the provided sample, we have created the parent element height as 200px and component(WaterTemperatureGauge) height as 100%, the gauge gets rendered with height as 200px. 
  


I have added a SfDashboardLayout component and in the component template for the first panel, I have a SfCircularGauge set to 100% height and width. On the second one I have my own WaterTemperatureGauge component (again just a wrapper). The result? The gauges won't fit to the container 

We can use the circular gauge inside the dashboard layout panel. When we resize the layout panel, we can refresh the gauge in the resize event of the layout panel by calling the Refresh() method of the circular gauge component. So the circular gauge gets re-rendered based on the panel size. In the “Index” razor file of the provided sample, we have created the SfCirculargauge component and WaterTemperatureGauge Component inside the layout. 
  
  
Please find the sample from the below link for your reference. 
  
https://www.syncfusion.com/downloads/support/forum/156131/ze/CirculargaugeHeightSize-1039745099
  
Please let us know if the above sample meets your requirement. 
  
Regards, 
Swetha Babu

Swetha Babu · Answer

Hi Enrique,Thank you for contacting Syncfusion support.We have checked the provided sample. The circular gauge is rendered based on the parent element when the height and width is set as 100%. Since you are using the circular gauge component in two razor pages, we have created a shared razor component with circular gauge component and used it in the other two razor files to render the gauge with different sizes. We are not able to reproduce the reported issue. We have created a simple application to demonstrate the same and it can be downloaded from the following link.https://www.syncfusion.com/downloads/support/directtrac/156131/ze/Circulargauge-821422567In the above sample, we have created the shared component in the Circulargauge file. We have rendered the gauge with the height and width of "200px" in the “Index” file and also when opening to the "WaterTemperature" component, the height and width of the gauge gets rendered with "600px". Please let us know if the above sample meets your requirement. If not, please modify the provided sample and share the same to us. It will be helpful for us to analyze and assist you better.Regards,Swetha Babu

Enrique Morell · Answer

Hi, I don't seem to be able to access your file:

Swetha Babu · Answer

Hi Enrique,Sorry for the inconvenience caused.We have changed the sample  link and provided link below for your reference.https://www.syncfusion.com/downloads/support/forum/156131/ze/CirculargaugeSize-1036963675-1698438188Regards,Swetha Babu

Enrique Morell · Answer

I have reviewed your code, and it seems I was not clear enough. What I am trying to do is to create a blazor component called WaterTemperatureGauge that will be used in other files as and it needs to take the height of its container. So that if I do:

then height needs to be 600 px. This is to avoid rewriting the same code over and over again since I need like 6 of these gauges. The problem is that even Height is just a passthrough parameter that is sent the circular gauge in WaterTemperatureGauge.razor, the Circular gauge used in this other file won't take the height of the container in another razor file, say index.razor.I expected something like this on WaterTemperatureGauge.razor. and then use

Enrique Morell · Answer

To give you a better idea, this is what I get right now:

So as you can see each gauge is in its own parent div set to a height and width of 200px, and the <WaterTemperatureGauge> component that is defined in WaterTemperatureGauge.razor that uses your circular gauge, is set to 100% width and height. Yet as you can see it tries to match the container but leaves a huge blank space on the top. Which is happenening because of that <rect> component that you can see in the Dev Tools that has a height of 450 pixels instead of 200 px as set by the container.

Enrique Morell · Answer

I have an even better example now that I am trying to mix this component with the dashboard layout component.I have this code where I use both my own component (which is just a wrapper of your gauge component with some custom logic to set the value) and your component directly.As you can see I have added a SfDashboardLayout component and in the component template for the first panel, I have a SfCircularGauge set to 100% height and width. On the second one I have my own WaterTemperatureGauge component (again just a wrapper). The result? The gauges won't fit to the container. You can see that the width is correct but the height isn't. There's a huge white space left. Plus when I resize the container, the size won't update. I expected to be able to resize the container, and the gauge would automatically fill the space. Like on the demo with the dashboard layout: https://www.syncfusion.com/blazor-components/blazor-dashboard-layout

Sensor Group 1 Sensor Group 2

Query	Details
<WaterTemplateComponent> height needs to be 600px	We have checked your query. We can use the parent element style to render the circular gauge with height and width as "100%". This gets the parent element height and width and renders the gauge. In the below sample we provided, we have made the circular gauge component as shared component and set 100% height and width to the shared component. So parent element in other files will provide size to the circular gauge. We have created the simple application to demonstrate the same and it can be downloaded from the link below the table. In our provided sample, we have created the parent element height as 600px and then provided the component height as 100%. In the “CircularGaugeHeight” file, we have rendered the gauge with height 600px. We have created the parent element with height as 600px and the “WaterTemperatureGauge” component height as 100%
each gauge is in its own parent div set to a height and width of 200px	When we set the circular gauge with 100% height, we are unable to reproduce the reported issue of gauge gets cut when we provide the height as 200px. In the “Circulargauge” razor file of the provided sample, we have created the parent element height as 200px and component(WaterTemperatureGauge) height as 100%, the gauge gets rendered with height as 200px.
I have added a SfDashboardLayout component and in the component template for the first panel, I have a SfCircularGauge set to 100% height and width. On the second one I have my own WaterTemperatureGauge component (again just a wrapper). The result? The gauges won't fit to the container	We can use the circular gauge inside the dashboard layout panel. When we resize the layout panel, we can refresh the gauge in the resize event of the layout panel by calling the Refresh() method of the circular gauge component. So the circular gauge gets re-rendered based on the panel size. In the “Index” razor file of the provided sample, we have created the SfCirculargauge component and WaterTemperatureGauge Component inside the layout.