Hi Suriya,
I have created a a simplified sample to reproduce this error.
I was able to pinpoint the issue to the Document Editor inside a collapsible div which is initially hidden. When the div is shown the Document Editor is displayed with a
with a small size as per my screenshot.
This solution uses the collapse function using jquery and bootstrap.
Include inside <body> tag in the _Host.cshtml file:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<script>
function DivVisibility(param) {
switch(param.mode) {
case "min":
$('.collapse.test'+param.id).collapse('hide');
break;
case "max":
$('.collapse.test'+param.id).collapse('show');
break;
}
}
</script>
Index.razor content:
@page "/"
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DocumentEditor
@inject IJSRuntime jsRuntime
<div>
<SfButton OnClick="@(() => ChangeVisibility(1, "min"))">Hide</SfButton>
<SfButton OnClick="@(() => ChangeVisibility(1, "max"))">Show</SfButton>
</div>
<div class="collapse show test1">
<div>
My Document Editor
</div>
<div>
<SfDocumentEditorContainer @ref="container" Height="600px" EnableToolbar=true ToolbarItems="@Items">
<DocumentEditorContainerEvents>
</DocumentEditorContainerEvents>
</SfDocumentEditorContainer>
</div>
</div>
@code {
SfDocumentEditorContainer container;
string[] Items = new string[14] { "New", "Open", "Separator", "Undo", "Redo", "Separator", "Image", "Table", "Hyperlink", "Separator", "Break", "Separator", "Comments", "TrackChanges"};
private class Params
{
public int id { get; set; }
public string mode { get; set; }
}
private async Task
ChangeVisibility(int id, string mode)
{
var param = new Params() { id = id, mode = mode };
await jsRuntime.InvokeVoidAsync("DivVisibility",param);
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
//Change mode to "max" for the Document Editor to work
as expected
await ChangeVisibility(1, "min");
}
}
}
Click on the button "Show" and the Document Editor will be displayed with the small canvas. If I hide the toolbar in the Document Editor the canvas resizes and is displayed as expected.
If I set the default visibility to "max" in OnAfterRenderAsync the Document Editor is rendered as expected.
I think there is an issue when the control is collapsed/hidden and then displayed using Jquery.
Regards,
