Remove Gray area with child menu items.

[Keith]

In the attached screen shot, you will notice there is a gray area to the left of each of the child menu items.

How do I get rid of that gray area so it shows all white background for all the child menu items?

 

[Magdalena]

Hello Keith,

The following CSS snippet will remove the vertical gray line, depending on the applied render mode:

classic render mode:

html .RadMenu .rmGroup {
    background-image: none;
}

lightweight render mode:

html .RadMenu .rmVertical:before,
html .RadMenu .rmMultiColumn:before {
    display: none;
}

 

Regards,
Magdalena
Telerik

[Keith]

Thanks Magdalena!  That worked perfectly.  

I was surprised that it worked because I had tried using CSS code to center the text of the Root menu item but never worked no matter what CSS code I put in based on postings regarding centering text of menu items.  At least the CSS code above worked for removing the vertical gray line.

Regarding trying to center text of menu items, I found that using CSS code to center text only works when having EnableEmbeddedSkins = false property in the RadMenu.  Otherwise, it never works.  I use the Office2007 skin on all the telerik controls.  If you have a way to center text that works when using a Skin then please let me know.

Anyways, thanks for your help!

Sincerely,

Keith Jackson

[Magdalena]

Hello Keith,

Text of subitems can be centered by the following:

.rmGroup {
    text-align: center;
}

If you would like to center the text for an exact skin, you can add a CSS class with name of the skin

.RadMenu_Office2007 .rmGroup {
    text-align: center;
}

Regards,
Magdalena
Telerik

[Keith]

Thanks Magdalena but that did not work.

Attached is a screen shot of the ASP.Net page with the RadMenu.

There are no child items for Home and Logout.  I am just trying to get the text centered in the menu but nothing seems to work when using a Skin.

Any help you can provide would be appreciated.  Thanks!

Sincerely,

Keith Jackson

[Magdalena]

Hi Keith,

I apologize for the misunderstanding. The provided code is for sub items of the RadMenu. If you would like to center text in root items, apply the following:

.rmRootLink {
    text-align: center;
}

Regards,
Magdalena
Telerik

[Keith]

Hi Magdalena,

     I appreciate your help.  Unfortunately that did not work either.  It still shows it as Left aligned.

I have even tried the following:

.RadMenu_Office2007 .rmRootLink {

text-align:center;

}

Still did not work.

Sincerely,

Keith Jackson

[Magdalena]

Hello Keith,

We are sending you a sample where we have applied the rule and worked properly at our side. Could you please test it if this solution works at your side? If yes, could you open a support ticket so you will be able to provide us with a sample project so we could test it locally?

Regards,
Magdalena
Telerik

[Keith]

Hi Magdalena,

     I have tested your sample and it does work on my side.

     Using your sample, I started taking things out of it one by one to see when the text will stop being centered.  Particularly I was concentrating on taking things out that I was not using.  First I took out the Skin Manager and it still worked.  Second I took out the RenderMode property of the RadMenu and that is when it stopped centering the text.

     So what I did in my ASP.Net page is I put the .rmRootLink code back in between the Style tags and put in RenderMode="Lightweight" property in my RadMenu.  Then it worked in centering the text. But I do not like RenderMode of Lightweight.  I need it to be able to center the text without using Lightweight rendermode.

     If you can find a way to center text without using Lightweight rendermode then please let me know.  Thanks!

Sincerely,

Keith Jackson

[Magdalena]

Hello Keith,

Thank you for clarifying the case. Centering the text in the classic render mode can be achieved by the following:

html .RadMenu .rmLink,
html .RadMenu .rmHorizontal .rmText {
    float: none;
    padding: 0;
    text-align: center;
}

You can find a sample solution in the attachment.

Regards,
Magdalena
Telerik

[Keith]

Thanks Magdalena!  That worked perfectly.

In this case, the RadMenu has only root items.  

For a RadMenu in Classic render mode with child items for the root items, how to code it so the text for both the root items and child items are centered?

For a RadMenu in Classic render mode with child items for the root items, how to code it so the text for only the child items are centered?

For a RadMenu in Classic render mode with child items for the root items, how to code it so the text for only the root items are centered?​​

Sincerely,

Keith Jackson

[Ivan Danchev]

Hello Keith,

Please excuse us for the delayed reply.

I attached back the sample page Magdalena posted in her last reply with some modifications to the CSS rules. The last two rules control the text centering of the root and child items.

The three scenarios can be achieved through the following changes:
1. Root items text centered and child items text left aligned:

html .RadMenu .rmRootGroup .rmLink,
html .RadMenu .rmRootGroup.rmHorizontal .rmText {
    float: none;
    padding: 0;
    text-align: center;
}

html .RadMenu .rmGroup .rmLink,
html .RadMenu .rmRootGroup.rmHorizontal .rmVertical .rmItem .rmText {
    float: left;
    text-align: left;
}

2. Child items centered, root items left aligned. You need to remove the first rule:

/*html .RadMenu .rmRootGroup .rmLink,
html .RadMenu .rmRootGroup.rmHorizontal .rmText {
    float: none;
    padding: 0;
    text-align: center;
}*/

html .RadMenu .rmGroup .rmLink,
html .RadMenu .rmRootGroup.rmHorizontal .rmVertical .rmItem .rmText {
    float: none;
    text-align: center;
}

3. Both root and child items text centered. In this case you only need the first rule:

html .RadMenu .rmRootGroup .rmLink,
html .RadMenu .rmRootGroup.rmHorizontal .rmText {
    float: none;
    padding: 0;
    text-align: center;
}

/*html .RadMenu .rmGroup .rmLink,
html .RadMenu .rmRootGroup.rmHorizontal .rmVertical .rmItem .rmText {
    float: none;
    text-align: center;
}*/

Regards,
Ivan Danchev
Telerik

[Keith]

Thanks Ivan!  I really appreciate it.

[Ivan Danchev]

Hello Keith,

You are welcome. I am glad the suggested styles helped you achieve the desired Menu appearance. Let us know if you need further assistance.

Regards,
Ivan Danchev
Telerik