Progressbar not filling whole width

[Michael Salzlechner]

We have a Dialog with a progressbar in it.

when the dialog comes up the progressbar is not filling the width of the dialog

if i resize the browser sometimes the progressbar will resize to the width of the dialog

[Duraimurugan Vedagiri]

Hi Michael,

Thank you for contacting syncfusion support.

Issue: Progress Bar width is inappropriate when placed inside of the SfDialog.

We have prepared the sample based on your requirement and suggest the solution below to resolve the scenario.

Solution:

Add the progress bar component, after the SfDialog has been opened and you can find whether the SfDialog is opened or not, with help of the "Opened" event in the SfDialog component. Please refer to the below code snippet and sample for your reference.

Code Snippet:
 

@page "/" 

 

@using Syncfusion.Blazor.ProgressBar; 

@using Syncfusion.Blazor.Popups; 

 

<div class="col-lg-12 control-section" id="target"> 

    <div> 

        @if (this.ShowButton) 

        { 

            <button class="e-btn" @onclick="@OnBtnclicked">Open</button> 

        } 

    </div> 

    <SfDialog Header="Current Progress" Target="#target" Width="500px" ShowCloseIcon="true" @bind-Visible="Visibility"> 

        <DialogTemplates> 

            <Content> 

                @if (ShowProgressIndicator) 

                { 

                    <SfProgressBar @ref="p" Value="80" Height="50px" Width="100%" ShowProgressValue="true"> 

                        <ProgressBarAnimation Enable="true"></ProgressBarAnimation> 

                    </SfProgressBar> 

                } 

            </Content> 

        </DialogTemplates> 

        <DialogEvents Opened="@opened" OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents> 

    </SfDialog> 

</div> 

 

@code{ 

    SfProgressBar p { get; set; } 

    public bool ShowProgressIndicator { get; set; } 

    public bool Visibility { get; set; } = false; 

    public bool ShowButton { get; set; } = true; 

    public void opened(Object args) 

    { 

        ShowProgressIndicator = true; 

    } 

    public void DialogOpen(Object args) 

    { 

        this.ShowButton = false; 

    } 

    public void DialogClose(Object args) 

    { 

        this.ShowButton = true; 

    } 

    public void OnBtnclicked() 

    { 

        this.Visibility = true; 

    } 

} 

Sample: https://www.syncfusion.com/downloads/support/forum/165254/ze/ProgressBarSample-2089293541.zip

Please let us know if you have any other queries.

Regards,
Durai Murugan V