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

8 posts, 0 answers
  1. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 11 Jun 2014 Link to this post

    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

  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 16 Jun 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 16 Jun 2014 Link to this post

    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
  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 17 Jun 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 17 Jun 2014 Link to this post

    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
  7. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 17 Jun 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Erik
    Erik avatar
    314 posts
    Member since:
    Feb 2008

    Posted 18 Jun 2014 Link to this post

    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
  9. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 18 Jun 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017