1. Home
  2. Forum
  3. Angular - EJ 2
  4. ejs-documenteditorcontainer reduce toolbar height and hide status bar

ejs-documenteditorcontainer reduce toolbar height and hide status bar

Hello, this is how the ejs-documenteditorcontainer look like "by default" :

ejs-documenteditorcontainer-default.png

- I'd like to reduce the height of the toolbar to make it more compact.

- And also hide the status bar


Here's how I'd like it to look :

ejs-documenteditorcontainer-custom.png

(i still want to use the ejs-documenteditorcontainer, i do not want to use the ejs-documenteditor)



5 Replies
DS Dhanush Sekar Syncfusion Team November 8, 2024 05:02 PM UTC

Hi Frederic,


Toolbar:

It's not possible to reduce the toolbar height in Document editor container component. We can hide build-in toolbar and use toolbar component with document editor public APIs for toolbar functionality.

Hide tool bar and properties pane in EJ2 TypeScript Document editor control | Syncfusion

Status bar:

Document editor doesn't have property to hide status bar. We can hide the status bar using CSS display style attribute with none.


Currently, we are preparing the sample for your requirement and will update the details on November 11, 2024.


Regards,

Dhanush S


DS Dhanush Sekar Syncfusion Team November 12, 2024 04:43 PM UTC

Hi Frederic,


We apologize for the delay.


We have prepared a document editor sample with toolbar component. please refer the below sample.

Sample:  7fyh1c (forked) - StackBlitz


Regards,

Dhanush S


FR Frédéric November 13, 2024 08:38 AM UTC

Hello, thank you for your reply. Your solution works as I expected for the toolbar. However, I hoped that the status bar wouldn't take up any more space, but here it's "simply" hidden but takes up the same space.

statusBarHiddenButStillTakeSpace.png


DS Dhanush Sekar Syncfusion Team November 15, 2024 01:54 PM UTC

Hi Frederic,


As previously noted, the Document editor does not offer an option to disable the status. However, we have provided a workaround for you. We are currently checking this scenario and will share updates on November 18, 2024.


Regards,

Dhanush S


DS Dhanush Sekar Syncfusion Team November 19, 2024 04:48 PM UTC

Hi Frederic,


The parent div of the status bar height is divided for the child element and has a color property along with a border. This ensures that the space remains consistent even when the status bar is hidden. Currently, it is not possible to hide the status bar in the Document Editor.


Regards,

Dhanush S


Loader.
Up arrow icon