IconPosition of TabItem (TabComponent) inside Dialog not working

[Laurin S]

Hi,

I'm using a TabComponent inside a DialogComponent, however when defining the "IconPosition" of an TabItem-Header-Icon, the position is always "Right" (in other words, not working).

I've attached a demo thats show the wrong behavior.

Any ideas?

Attachment: reactutsceg_f977b0c6.zip

[Ruksar Moosa Sait]

Hi Laurin,

Greetings from Syncfusion support.

We have validated your shared code and found the first letter of the value assigned to the iconPosition was given in capital instead of small and that is the root cause of the problem you can resolve it by using the value first letter as a small letter.

[index.js]

headerText = [

    { text: 'Grid', iconCss: 'las la-file', iconPosition: 'left' },

    { text: 'Scheduler', iconCss: 'las la-file', iconPosition: 'right' },

    { text: 'Chart', iconCss: 'las la-file', iconPosition: 'top' },

    { text: 'Rich Text Editor', iconCss: 'las la-file', iconPosition: 'bottom'},

    { text: 'Form', iconCss: 'las la-file', iconPosition: 'left' },

  ];

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

Regards,

Ruksar Moosa Sait

Attachment: ReactIconPositionModified_34555908.zip