1. Home
  2. Forum
  3. Blazor
  4. How to display Docuemnt Editor at height 100%

How to display Docuemnt Editor at height 100%

I am using Blazor Word Processor - I would like the component to fill the available space and have tried using:

<SfDocumentEditorContainer Width="100%" Height="100%" >

however this seems to render at only a height of 289px even when it has the full page to render

I have found in the html that there is an element within the docuemnt editor with a fixed height set:

<div id="sfdocumenteditorpnh4fke3gdr_viewerContainer" class="e-de-viewercontainer" style="position: relative; overflow: auto; direction: ltr; outline: currentcolor none medium; height: 289px; width: 1788px; cursor: text;" tabindex="0">

This seems to be limiting the height of the component on the page

How can I set this height to 100% and get the document editor to fill the page?


10 Replies
KB Kurthis Banu Abdul Majeeth Syncfusion Team August 18, 2021 10:28 AM UTC

Hi Kaine, 

To resolve the reported issue, call the resize API in create event and set height property. By referring below code snippet:  
  
  
            <div style="height:100%">   
   
                <SfDocumentEditorContainer @ref="container" ID="editor" EnableToolbar="true" Height="590px">   
   
                    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents>   
   
                </SfDocumentEditorContainer>   
   
            </div>   
   
   
@code {   
   
    SfDocumentEditorContainer container;    
      
   
    public void OnCreated(object args)   
    {   
        container.Resize();   
        container.DocumentEditor.Resize();   
    }   
   
}   
   
<style>   
    #editor {   
        display: block;   
    }   
</style>   


  
For your reference, we have attached the Sample it can be downloaded from the below link.        

Sample Link:     

Can you please cross check it in your side and let us know if you still facing issue?    

Regards, 
Kurthis Banu A. 


KA Kaine August 18, 2021 11:08 AM UTC

Hi Kurthis,

Thanks for your reply.

Sadly this does not work if you set the height to 100%. This only works if you specify the pixel height of the component.

If you change the height in your sample to 100% you will see the issue reproduced.

Cheers,

Tim


KB Kurthis Banu Abdul Majeeth Syncfusion Team August 18, 2021 01:47 PM UTC

Hi Kaine,  

We have confirmed the reported issue as bug and logged the defect report. We will fix this issue and include in our Blazor nuget release which scheduled on August 24,2021.    

You can track the status of bug through below feedback link:    

Regards,  
Kurthis Banu A.  


KA Kaine August 18, 2021 02:47 PM UTC

Hi Kurthis,


Thanks! Can you give me access to this feedback item so that I can track its progress and see when a fix is released?


Thanks


Tim



AA Anitha Azhagesan Syncfusion Team August 19, 2021 05:22 AM UTC

Hi Tim, 
  
We have added you to access the feedback portal. Please log off and login with Syncfusion credentials . If still issue persist please share us screenshot of the issue. 
  
Regards, 
Anitha 


KB Kurthis Banu Abdul Majeeth Syncfusion Team August 24, 2021 01:57 PM UTC

Hi Kaine,  

We deeply regret the inconvenience caused. 

We are not possible to include the fix in our latest patch release. Currently, we are working on resolving this issue with high priority. We will fix this issue and include in our Blazor nuget release which scheduled on August 31,2021.      

You can track the status of bug through below feedback link:      

Regards,    
Kurthis Banu A.    


KB Kurthis Banu Abdul Majeeth Syncfusion Team September 1, 2021 07:34 AM UTC

Hi Kaine,  

We deeply regret the inconvenience caused.   

We are not possible to include the fix in our latest patch release. Currently, we are working on resolving this issue with high priority. We will fix this issue and include in our Blazor nuget release which scheduled on September 8,2021 Without further delay.     

You can track the status of bug through below feedback link:        

Regards,      
Kurthis Banu A.    


KB Kurthis Banu Abdul Majeeth Syncfusion Team September 8, 2021 02:17 PM UTC

Hi Kaine, 

We deeply regret the inconvenience caused.    

We are not possible to include the fix in our latest patch release. Currently, we are working on resolving this issue with high priority. We will fix this issue and include in our Blazor nuget 2021 Volume 3 release which scheduled on end of September 2021 Without further delay.      

You can track the status of bug through below feedback link:         

Regards,       
Kurthis Banu A.     


KB Kurthis Banu Abdul Majeeth Syncfusion Team October 1, 2021 02:19 PM UTC

Hi Kaine,  

We are glad to announce that our Essential Studio 2021 Volume 3 release v19.3.0.43 is rolled out and is available for download under the following link and in that release, we have added the fix for reported issues.           

         
Please upgrade the package to latest version to resolve this issue.            


Code snippet: 
            <div style="height:100%; width:100%"> 
 
                <SfDocumentEditorContainer @ref="container" EnableToolbar="true" Height="100%"> 
 
                    <DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents> 
 
                </SfDocumentEditorContainer> 
 
            </div> 
@code { 
 
    SfDocumentEditorContainer container; 
    SfDialog DialogDocumentEditor; 
 
 
    public void OnCreated(object args) 
    { 
        container.Resize(); 
        container.DocumentEditor.Resize(); 
    } 
 
} 
 



We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.  
 
Regarding: Toolbar overflow Issue  

We will fix this issue and include in our Blazor nuget release which scheduled on Oct 13, 2021.     

You can track the status of bug through below feedback link:     

Regards, 
Kurthis Banu A. 


KB Kurthis Banu Abdul Majeeth Syncfusion Team October 13, 2021 11:58 AM UTC

Hi Kaine, 

We are glad to announce that our blazor nuget release (v19.3.45 ) is rolled out successfully and In that release, we have added the fix for reported issue.
          
Please upgrade the package to latest version to resolve this issue.             
   
Feedback Link: 

Release Notes:   

Code snippet to resolve your reported problem: 
<div style="height:100%;"> 
 
 <SfDocumentEditorContainer @ref="container" EnableToolbar="true" Height="100%"> 
 
 
<DocumentEditorContainerEvents Created="OnCreated"></DocumentEditorContainerEvents> 
 
 
</SfDocumentEditorContainer> 
 
</div> 
 
@code { 
 
 
 
    SfDocumentEditorContainer container; 
 
    public void OnCreated(object args) 
    { 
        container.ResizeAsync(); 
        container.DocumentEditor.Resize(); 
    } 
 
 
 
} 


Note: 
For your information, in 2021 vol 2 release (19.2.44) we have added Async suffix for asynchronous methods, we have changed the name too to meet standard. 

Release notes: 

Regards, 
Kurthis Banu A. 


Loader.
Up arrow icon