Radmenu incorrect height and top (image) 2014 Q1 .403

[Erik]

Hello,

Today I upgraded from Q1 225 to Q1 403. 

I noticed, immediately, that the menu rendering was, again, incorrect. I removed fixes for Q1 225 first... ;-|

The classic creates a very high main bar and the icons are partly shown. See attachement: radMenu_RenderMode_Classic.png
The Lightweight has also the icon problem. See attachement: radMenu_RenderMode_Lightweight.png

The reason that the images appear partly, is that they have a top: 50%.
I temporary fixed this with:

.RadMenu .rmSlide .rmVertical .rmLeftImage {
    top: 0 !important;
}

Regards,

Erik

[Magdalena]

Hi Erik,

Thank you for contacting Telerik support.

Regarding to developing of our controls and improving their elasticity, the icons used in RadMenu are now vertically aligned for the default height 16 pixels. If you would like to align icons with different height, please, add the minus margin which the value is half the height of icons by the following:

html .RadMenu .rmGroup .rmImage,
html .RadMenu .rmGroup .rmLeftImage {
    margin: /* - $icon-height/2 */;
}

For example if the height of icons is 32 pixels, the margin will be "-16px". This customization will center the icons vertically independent on line-height.

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik

 

 

[Erik]

Hello  ,

I think you mean margin-top? 
I have 24x24 px icons. I solved it like this:
(and got rid of all other fixes from the last year.. Backwards compatibility keeps being an issue Telerik!)

html .RadMenu .rmGroup .rmImage,
html .RadMenu .rmGroup .rmLeftImage {
    margin-left: 0px !important; /* 6 - $icon-width/4 ?? */
    margin-top: -12px; /* 0 - $icon-height/2 */
}

Now the icon is displayed correctly in all browsers (Chrome, IE11, FF)
The left margin is 6px, correct it with 0px
The top margin is -12px (0 - (24/2)) and because the top = 50%, it starts higher

Erik

[Magdalena]

Hi Erik,

Actually - yes, the margin-top is the correct property. The resetting of the left margin is maybe necessary if you have some custom additional styles with an additional left padding or margin.

Regarding to these two sentences we are not sure that we understand you in right way: from the sentence " the icon is displayed correctly in all browsers (Chrome, IE11, FF)" we understand that the problem is resolved, but in the sentence "and because the top = 50%, it starts higher" is described that there is still the issue with aligning icons.

If the issue occurs, or there are some other issues that you would like to resolve, could you please provide us with a runnable project or all custom CSS styles that you are applying? So we will be able to test it locally and can help you in more efficient way.

Looking forward to your reply.

Regards,
Magdalena
Telerik

 

 

[Erik]

Hello Magdalena,


It works fine now. I did have to plave an "!Important" after "margin-top: -12px", but it displays correctly in the mentioned browsers.

Maybe a property where we can set the icon size is a suggestion?


Regards,

Erik

[Magdalena]

Hi Erik,

Thank you for your feedback, but because of the fact that vertical centering of images can be achieved by one line CSS code, we do not plan to add such property for image size.

Regards,
Magdalena
Telerik

 

 

[Erik]

Hello,

There is also a little CCS bug in the vertical menu. I noticed it with a RadContext menu. 

Q1 .0403 has this:

.RadMenu .rmVertical > li.rmSeparator {
    border-width: 1px 0;
 }

but this will generate 2 borders (top+bottom). This makes the separator 2px height. Also the color is not set like in the "normal menu" (silk in my case)

I solved it like this:

.RadMenu .rmVertical > li.rmSeparator {
    border-width: 1px 0 0 0;
    border-color: #e3e2e2 #fefefe #fefefe #e3e2e2;
}

Regards,

Erik

[Magdalena]

Hi Erik,

Actually we have already logged this issue so it will be fixed for the next service pack. The issue occurs in RadMenu in lightweight render mode in classic skins. Actually in the most classic skins the horizontal separator consists of two vertical lines with different color. This is the reason why the separator has double border. In these cases the issue can be resolved by the following

html .RadMenu .rmRootGroup > .rmItem.rmSeparator {
    padding: 0;
}

Exception are four skins (Metro, Office2010Black, Outlook and WebBlue) where the separator line is single and there is necessary to add the workaround that you have mentioned.


Regards,
Magdalena
Telerik