Circular Gauge Not Centering in Bootstrap Carousel

[Brent Minder]

Hi,

I've put a circular gauge into a bootstrap 5 carousel, and only the active slide is centered. I've tried putting different divs around the slide divs and looked at your other similar examples.

Can you explain how to center non-active slide please? Note that resizing the window will center it, but i don't even know how to add that automatically.

Video: https://youtu.be/5pqCrwL7jDw

Images of issue:

Please see attached sfCircularGaugeInCarousel.sln.

Thanks,

Brent

My Versions:

Syncfusion v19.3.57

Bootstrap v 5.1.3

VS 2022

Attachment: sfCircularGaugeInCarousel_bfb2f370.zip

[Indumathi Ravi]

Hi Brent, 

  

Thank you for contacting Syncfusion Support. 

  

We are able to reproduce the issue from the provided image. We have reproduced the reported issue with our Circular Gauge component inside a Bootstrap Carousel JS control. We can fix the reported issue by calling “RefreshAsync” method of Circular Gauge when the next slide is navigated using the arrow button click. Please find the code snippet below. 

  

Code snippet: 

@if (AllowVisible) 

  { 

         <SfCircularGauge @ref="@gauge"> </SfCircularGauge> 

   }
    <a  role="button" data-slide="next" @onclick="GaugeRefresh"> </a>

@code { 

   SfCircularGauge gauge;     

   public bool AllowVisible  = false; 

   public async void GaugeRefresh(){ 

       AllowVisible = true; 

       await Task.Delay(1000); 

       this.gauge.RefreshAsync(); 

   } 

} 

  

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

Sample Application: https://www.syncfusion.com/downloads/support/forum/171136/ze/BlazorApp2_(2)-1445966871 

  

In the above sample link, we have controlled the rendering of our Circular Gauge component using a boolean variable "AllowVisible". We used the "onclick" event of the anchor element(used for navigating to next and previous slides in the carousel) to refresh our Circular Gauge component to place it in the center. If you using the pointer animation of the Circular Gauge, we need to add a time delay before calling the RefreshAsync method. 

  

We are facing the reported issue when the carousel slide is automatically changed. We are currently analyzing this scenario. However, can you please provide the code snippet or modify the above sample to reproduce the reported issue? While we analyzed for the Bootstrap Carousel control, we came across JS and Blazor components. We are not sure which control you are using in your application. So please provide us a sample application for the reported issue. It will be helpful for us to analyze and assist you with the exact requirement. 

  

Regards, 

Indumathi R 

[Sabari Anand Senthamarai Kannan]

Hi Brent, 

 

Sorry for the inconvenience. 

 

We have noticed that you have provided the sample application in your update. We will analyze the reported scenario with the provided sample and update you with further details on December 14, 2021. 

 

Regards, 

Sabari Anand

[Indumathi Ravi]

Hi Brent, 

  

When we analyzed the provided sample, we came to know that we can fix the reported issue in the application level by calling “RefreshAsync” method of Circular Gauge. When the next slide is navigated using the arrow button click or using indicators, we can call the “RefreshAsync” method of the respective Circular Gauge components in your application. Please find the code snippet for the same below. 

  

Code snippet: 

<div class="carousel-indicators"> 

… 

<button type="button" data-bs-target="#supSlides" data-bs-slide-to="1" @onclick="GaugeRefreshSlideTwo" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#supSlides" data-bs-slide-to="2" @onclick="GaugeRefreshSlideThree" aria-label="Slide 3"></button> 

</div> 

<div class="carousel-inner" style="border:0px solid green;"> 

… 

<SfCircularGauge @ref="@gauge1"> </SfCircularGauge>  

<SfCircularGauge @ref="@gauge2"> </SfCircularGauge>  

<SfCircularGauge @ref="@gauge3"> </SfCircularGauge>  

</div> 

  

<span class="carousel-control-prev-icon" aria-hidden="true" @onclick="GaugeRefresh"></span> 

    <span class="carousel-control-next-icon" aria-hidden="true" @onclick="GaugeRefresh"></span>

@code {  

   SfCircularGauge gauge; 

   public void GaugeRefresh(){ 

       this.gauge2.RefreshAsync(); 

       this.gauge3.RefreshAsync(); 

   } 

  

    public void GaugeRefreshSlideTwo(){ 

       this.gauge2.RefreshAsync(); 

    } 

  

    public void GaugeRefreshSlideThree(){ 

       this.gauge3.RefreshAsync(); 

    } 

    

}  

 

  

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

  

Sample Application: https://www.syncfusion.com/downloads/support/forum/171136/ze/CarouselSample-1030188727 

 

Screen Capture (Video): https://www.syncfusion.com/downloads/support/forum/171136/ze/bootstrap2072889614 

  

Please let us know if the above solution meets your requirement and let us know if you need any further assistance. 

  

Regards, 

Indumathi R 

[Brent Minder]

Hi Indumathi,

That worked perfect in my sample. I then put it in my actual blazor component, made the following additions, and it worked inside the component as well!

Inside component I added:
public async Task RefreshAsync() {
await circGauge.RefreshAsync();
}

In the parent page, I made a couple of tweaks:
MyComponentObject gauge2, gauge3;
public async Task GaugeRefresh()
{
await gauge2.RefreshAsync();
await gauge3.RefreshAsync();
}

Thank you so much!

[Sabari Anand Senthamarai Kannan]

Hi Brent, 

 

Thank you for the update. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Sabari Anand

[Brent Minder]

How would you get your sample app to animate after each pressing of Next > ?

https://www.syncfusion.com/downloads/support/forum/171136/ze/CarouselSample-1030188727 

Thanks,

Brent

[Indumathi Ravi]

Hi Brent, 

  

Thank you for the update. 

 

We suspect you need the animation of the pointer of the Circular Gauge component in each of the next slide click. We are currently analyzing the reported scenario with the provided information. We will update you with further details on December 21, 2021. 

  

Please let us know whether the animation is required for the pointer of the Circular Gauge component or the Bootstrap Carousel JS control. 

  

Regards, 

Indumathi R. 

[Indumathi Ravi]

Hi Brent,

We were able to achieve the requirement at the application level by controlling the Circular Gauge component with a boolean variable. This can be done by creating a boolean value (AllowVisibleOne, AllowVisibleTwo, and AllowVisibleThree) to each and every Circular Gauge component and this boolean value decides to render the appropriate Circular Gauge component. We can use the "GaugeSlideNext" and "GaugeSlidePrev" methods to navigate to the next and previous slides by clicking the arrow buttons. Using this method, we have counted the number of slides that are being navigated. Based on the count, the appropriate boolean variable is set to "true," and the other boolean variables are set to "false". The appropriate Circular Gauge component is now rendered along with pointer animation after each button (next and previous) press as expected. Please find the code snippet for the same below.

Code Snippet: 

<div class="carousel-indicators">  

…  

<button type="button" data-bs-target="#supSlides" data-bs-slide-to="1" @onclick="GaugeSlideOne" aria-label="Slide 1"></button> 

<button type="button" data-bs-target="#supSlides" data-bs-slide-to="1" @onclick="GaugeSlideTwo" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#supSlides" data-bs-slide-to="2" @onclick="GaugeSlideThree" aria-label="Slide 3"></button>  

</div>  

<div class="carousel-inner" style="border:0px solid green;">  

…  

<SfCircularGauge @ref="@gauge1"> </SfCircularGauge>   

<SfCircularGauge @ref="@gauge2"> </SfCircularGauge>   

<SfCircularGauge @ref="@gauge3"> </SfCircularGauge>   

</div>  

   

<span class="carousel-control-prev-icon" aria-hidden="true" @onclick="GaugeSlidePrev"></span>  

    <span class="carousel-control-next-icon" aria-hidden="true" @onclick="GaugeSlideNext"></span> 

  

... 

  

<div> 

 @if (AllowVisibleOne)
   { 

         <SfCircularGauge></SfCircularGauge> 

   } 

</div> 

  

<div> 

 @if (AllowVisibleTwo)
   { 

         <SfCircularGauge></SfCircularGauge> 

   } 

</div> 

  

<div> 

 @if (AllowVisibleThree)
   { 

         <SfCircularGauge></SfCircularGauge> 

   } 

</div>

@code {   

   SfCircularGauge gauge1, gauge2, gauge3; 

   public bool AllowVisibleOne = true; 

   public bool AllowVisibleTwo = false; 

   public bool AllowVisibleThree = false; 

  

   public double NextSlideValue = 1; public double PreviousSlideValue = 1;  

  

   public void GaugeSlidePrev(){  

     // Perform calculation 

   }  

  

   public void GaugeSlideNext(){  

     // Perform calculation 

   }  

}   

  

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

Sample Application: https://www.syncfusion.com/downloads/support/forum/171136/ze/CGSample-1965182243 

Screen Capture (Video): https://www.syncfusion.com/downloads/support/forum/171136/ze/pointeranimation-203959536 

Please let us know if the above solution meets your requirement and let us know if you need any further assistance.

Regards,
Indumathi R.