This is a migrated thread and some comments may be shown as answers.

Remove Gray area with child menu items.

13 Answers 51 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Keith
Top achievements
Rank 1
Keith asked on 16 Sep 2015, 01:17 PM

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?

 

13 Answers, 1 is accepted

Sort by
0
Accepted
Magdalena
Telerik team
answered on 17 Sep 2015, 12:36 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Keith
Top achievements
Rank 1
answered on 17 Sep 2015, 01:04 PM

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

0
Magdalena
Telerik team
answered on 18 Sep 2015, 10:52 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Keith
Top achievements
Rank 1
answered on 18 Sep 2015, 12:28 PM

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

0
Magdalena
Telerik team
answered on 18 Sep 2015, 01:01 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Keith
Top achievements
Rank 1
answered on 18 Sep 2015, 01:25 PM

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

0
Magdalena
Telerik team
answered on 22 Sep 2015, 07:52 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Keith
Top achievements
Rank 1
answered on 22 Sep 2015, 12:42 PM

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

0
Accepted
Magdalena
Telerik team
answered on 23 Sep 2015, 07:29 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Keith
Top achievements
Rank 1
answered on 23 Sep 2015, 12:42 PM

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

0
Accepted
Ivan Danchev
Telerik team
answered on 29 Sep 2015, 07:01 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Keith
Top achievements
Rank 1
answered on 29 Sep 2015, 12:03 PM
Thanks Ivan!  I really appreciate it.
0
Ivan Danchev
Telerik team
answered on 02 Oct 2015, 08:00 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Menu
Asked by
Keith
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Keith
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or