Toolbar. Can we set it so the buttons are spaced equally in the full width of the container ?

[Eric]

Right now, the buttons can take half the screen and the right part of the toolbar is left empty.

I would like the buttons to take the full width of the screen. If the screen is wide, the buttons would just be spaced more.

Possible ?

[Satheesh Kumar Balasubramanian]

Hi Eric,

You can use toolbar item width property to achieve your requirement.

https://stackblitz.com/edit/javascript-toolbar-button-container?file=index.ts,index.html

https://ej2.syncfusion.com/documentation/api/toolbar/itemModel/#width

index.ts:

let toolbarObj: Toolbar = new Toolbar({

  items: [

    {

      prefixIcon: 'e-icons e-cut',

      width: '110px',

      tooltipText: 'Cut',

    },

    {

      prefixIcon: 'e-icons e-copy',

      width: '110px',

      tooltipText: 'Copy',

    },

    {

      prefixIcon: 'e-icons e-paste',

      width: '110px',

      tooltipText: 'Paste',

    },

  ],

});

//Render initialized Toolbar component

toolbarObj.appendTo('#toolbar_default');

Kindly try the attached sample and let us know if this meets your requirement.

Regards,

Satheesh Kumar B