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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Tab header icon doesn't scale and position correctly

Thread ID:

Created:

Updated:

Platform:

Replies:

147093 Sep 1,2019 06:30 AM UTC Sep 3,2019 01:34 PM UTC Vue 1
loading
Tags: Tab
Marius Lian
Asked On September 1, 2019 06:30 AM UTC

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?

Thanks,
Marius





Vengatesh Maniraj [Syncfusion]
Replied On September 3, 2019 01:34 PM UTC

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. 
 
Regards, 
Vengatesh 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon