Make Toolbar Component look like Document Editor Toolbar

[Jonathan Marbutt]

Is it possible to make the standard toolbar component look like the document edit toolbar with the icons on top? I can not find this configuration setting.

[Satheesh Kumar Balasubramanian]

Hi Jonathan, 

  

Greetings from Syncfusion Support. 

  

We have validated your reported query "Make Toolbar Component look like Document Editor Toolbar" at our end. We have achieved your requirement by setting document editor css class to the toolbar "cssClass" property. Please refer the following sample. 

https://stackblitz.com/edit/edittoolbar?file=app.component.html
 

  

Code snippet:  

<ejs-toolbar cssClass="e-de-toolbar"> 

  <e-items> 

    <e-item 

      prefixIcon="e-cut-icon tb-icons" 

      tooltipText="Cut" 

      text="Cut" 

    ></e-item> 

    <e-item 

      prefixIcon="e-copy-icon tb-icons" 

      tooltipText="Copy" 

      text="Copy" 

    ></e-item> 

    <e-item 

      prefixIcon="e-paste-icon tb-icons" 

      tooltipText="Paste" 

      text="Paste" 

    ></e-item> 

    <e-item 

      prefixIcon="e-bold-icon tb-icons" 

      tooltipText="Bold" 

      text="Bold" 

    ></e-item> 

    <e-item 

      prefixIcon="e-underline-icon tb-icons" 

      tooltipText="Underline" 

      text="Underline" 

    ></e-item> 

    <e-item 

      prefixIcon="e-italic-icon tb-icons" 

      tooltipText="Italic" 

      text="Italic" 

    ></e-item> 

  </e-items> 

</ejs-toolbar> 

 

 

Kindly try the above sample and get back to us if you need further assistance. 

Regards, 

Satheesh Kumar B