We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Tab header icon doesn't scale and position correctly

Hi Syncfusion,

I am adding a tab in code like this:
// Add new tab content to new tab item and add tab to tabs and set active
var tabObj = this.$refs.TabInstance.ej2Instances;
let newTabItem = {
header: {
text: "Asana",
iconCss: "e-myicon",
iconPosition: 'Left' },
content: newTabContent,

// Add tab and set to seleced tab
tabObj.addTab([newTabItem], tabObj.items.length);
tabObj.select(tabObj.items.length - 1);

Then the css part looks like this:
.e-myicon:before {
content: url(./assets/myicon.png);

The problem is that the icon is not scaled nicely and also the position is wrong. Here is a screenshot:

So as you can see that iconis scaled strangely and also it is not positioned left.

Any idea what could be wrong?


1 Reply

VM Vengatesh Maniraj Syncfusion Team September 3, 2019 08:34 AM

Hi Marius, 
Syncfusion Greetings. 
We tried to reproduce your reported scenario at our end, but it is working fine at our end. We have prepared the sample which can be available in below link. 
Kindly check the above sample and still the issue persists, kindly try to reproduce the issue in that sample with clear code(if possible) to serve you better. 

Live Chat Icon For mobile
Up arrow icon