Show multiple Spinner on one page

[gisela]

Hi Syncfusion Team,

based on your sample of thread Id 156203 i tried to display 3 controls, every control with his own spinner (please look at page "FetchData" in the attached sample), but all the spinner are placed in the middle of the page. How can i achieve, that every spinner is in the middle of the control?

Thanks in advance

gisela

Attachment: SfSpinner_loadingData_af45178a.rar

[Revanth Krishnan]

Hi Gisela, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “How can I achieve that every spinner is in the middle of the control?” 

 

The requirements can be achieved by setting the `Target` property of the spinner. When further analysis in your sample, set the control element’s position as relative. So, the spinner rendered inside the target element and will be displayed in middle of each targets. 

 

Code Snippet: 

 

<div id="control1" style="height:300px; position: relative; background-color:yellow"> 

    <h1>Hallo Test1</h1> 

</div> 

 

<SfSpinner @ref="SpinnerObj" Target="@Target" CssClass="e-customClass" Width="50px" Type="SpinnerType.Material"> 

</SfSpinner> 

 

@code { 

    public string Target { get; set; } = "#control1"; 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/157267/ze/SfSpinner_loadingData492095983 

 

Please refer the above code snippet and the sample and let us know if it resolve your issue. 

 

Regards, 

Revanth 

[gisela]

Hi Revanth,

thank you for your quick response.

Unfortunately, the attached example does not meet my requirements (you have added a third control).

But with your advice "control element’s position as relative" i have solved my requirements.

Thanks

Gisela

[Indrajith Srinivasan]

Hi Gisela, 

 

Good day to you, 

 

Query 1: “Unfortunately, the attached example does not meet my requirements (you have added a third control).” 

 

We have used the third control since, calling the same tags twice in a page doesn’t render the third spinner component as the target have the same values when the spinner rendered second time, so the spinner will be rendered again in the first element. 

 

Query 2: “But with your advice "control element’s position as relative" i have solved my requirements.” 

 

We are gad that your reported issue is resolved. Please get back to us if you need any further assistance. 

 

Regards, 

Indrajith