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.

ejMenu questions

Thread ID:

Created:

Updated:

Platform:

Replies:

117978 Jan 15,2015 04:00 PM Feb 5,2015 12:45 AM JavaScript 3
loading
Tags: ejMenu
Randy Craven
Asked On January 15, 2015 04:00 PM

Hello,

I am using ejMenu version 12.24.0.42 and would like to ask some questions.

  1. I created a css class to change the font size, weight, and color.  However, only the font weight changes.

    .testMenu{

    font-weight:normal;

    font-size:1.5em;

    color: blue;

    }



  2. Is there a way to align the menu text with the sprite or image, and force each menu item to be at least a certain height (to avoid what is happening in this image)? 


thank you,

Randy



Manikandan Mariappan [Syncfusion]
Replied On January 19, 2015 07:06 AM

Hi Randy,

Thanks for your interest in Syncfusion Products.

Query 1: I created a css class to change the font size, weight, and color. However, only the font weight changes.

We would like to inform you that we cannot change text related styles for menu control directly because we can apply the styles internally with class order hierarchy. To achieve this behavior, we have to overwrite the css classes of menu component in the below code and please find the below code snippet,

We prepared a simple sample to showcase this style override, please download the files from the following location.

    <style type="text/css">

        /*overwrite the default styles by follow the class hierarchy*/

        .e-menu.e-widget .e-list .testMenu {

            font-weight: normal;

            font-size: 13px;

            color: blue;

        }

    </style>

We prepare a simple sample to showcase this style override, please download the files from the following location.

Location: Sample

Query 2: Is there a way to align the menu text with the sprite or image, and force each menu item to be at least a certain height (to avoid what is happening in this image)? 

We like to inform you that, when we set the sprite or image with the menu text in the menu item we like to set the custom css to align.

1.       The following css code snippet is used to align the image with menu text.

    <style type="text/css">

        /*custom class for add the image to the menu text with custom styles*/

        .e-menu li.e-list > a > .customImage {

            background-image: url("images/mush.png");

            background-repeat: no-repeat;

            background-size: 20px 20px;

            height: 18px;

            left: 2px;

            top: 4px;

            width: 24px;

        }

    </style>

2.       The following css code snippet is used to align the sprite with menu text.

    <style type="text/css">       

        [class^="flag-"],

        [class*="flag-"] {

            background-image: url("images/flags.png");

            height: 14px;

            /* we need to set custom styles to align the image with menu text*/

            left: 2px;

            top: 4px;

            width: 24px;

        }

        .flag-am {

            background-position: -25px 0;

        }

        .flag-bd {

            background-position: -75px 0;

        }

        .flag-cu {

            background-position: -25px -15px;

        }

        .flag-dz {

            background-position: -75px -15px;

        }

        .flag-eg {

            background-position: -125px -15px;

        }

    </style>

We prepare a simple sample to showcase this style override, please download the files from the following location.

Location: Sample

Please let us know if you need any further assistance,

Regards,

Manikandan Mariappan



Randy Craven
Replied On February 4, 2015 03:35 PM

Thank you, Manikandan Mariappan.

This tells me what I need to know for know.  I will contact you for any further questions.

thanks again,

Randy

Saranya Sivakumar [Syncfusion]
Replied On February 5, 2015 12:45 AM

Hi Randy,
Thanks for your update.
Please let us know if you have further concern.
Regards,
Saranya.S



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.

;