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.
Unfortunately, activation email could not send to your email. Please try again.

imageUrl resize with spriteCssClass

Thread ID:

Created:

Updated:

Platform:

Replies:

130902 Jun 9,2017 05:11 AM Jun 12,2017 08:53 AM Angular 1
loading
Tags: ejMenu
Me
Asked On June 9, 2017 05:11 AM

Hey,

Trying to add icons and need to resize them to appropiate size. Looks like I'm not able to change size of icons added via imageUrl, so tried to use spriteCssClass and use there 'background-image', but it seems that spriteCssClass won't see my css class at all.

Any suggestions, how can I add icons into ejMenu and set appropiate size via CSS?


Thanks,
M!

Keerthana Rajendran [Syncfusion]
Replied On June 12, 2017 08:53 AM

Hi Me, 
 
Thank you for contacting Syncfusion support 
 
Css for sprite images can be customized by the user as per the requirement using class name. We suggest you to use media query in stylesheet to apply css to sprite class on resize. Please refer to the below code 
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [fields]="fieldsvalues"> 
</ej-menu> 
<style> 
[class^="sprite-"], 
 [class*="sprite-"] { 
            background-image: url("../src/content/images/menu/mailicons.png"); 
            height: 33px; 
            left: 2px; 
            top: 4px; 
            width: 33px; 
                                     
 
        } 
  .sprite-calendar { 
            background-position: -25px -255px; 
        } 
 
        .sprite-contacts { 
            background-position: -26px -429px; 
        } 
 
        .sprite-deleted { 
            background-position: -24px -152px; 
        } 
 
        .sprite-drafts { 
            background-position: -24px -83px; 
        } 
 
        .sprite-folder { 
            background-position: -24px -464px; 
        } 
 
        .sprite-folders { 
            background-position: -24px -222px; 
        } 
 
        .sprite-inbox { 
            background-position: -25px -13px; 
        } 
 
        .sprite-junk { 
            background-position: -23px -187px; 
        } 
 
        .sprite-notes { 
            background-position: -26px -394px; 
        } 
 
        .sprite-outbox { 
            background-position: 0 -414px; 
            width: 16px; 
            height: 16px; 
        } 
 
        .sprite-root { 
            background-position: -25px -49px; 
        } 
 
        .sprite-sentitems { 
            background-position: -26px -118px; 
        } 
 
 
 @media (min-width: 320px) and (max-width: 480px) { 
        [class^="sprite-"], 
        [class*="sprite-"] { 
            background-image: url("../src/content/images/menu/mailicons.png"); 
            height: 15px; 
            left: 2px; 
            top: 4px; 
            width: 15px; 
            
        } 
} 
</style> 
 
 
 
We have prepared sample for reference. Please refer to the below given link 
 
 
 
Regards, 
Keerthana.

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.

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.

;