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
