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

RadMenu center menu text

9 Answers 306 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Meik Napierski
Top achievements
Rank 1
Meik Napierski asked on 24 Feb 2010, 11:51 AM
Hello,
i have a RadMenu with 4 menu items. Over the css selector .RadMenu .rmRootGroup .rmItem i set the width to 75px of every item. I applied a background-image over this selector but how can i center the text of the menu item, so that the text is centered on the background image? The selector .RadMenu .rmRootGroup .rmItem { text-align: center; } doesn't work.

The version is 2009.3 1314

with best regards
Meik Napierski

 

9 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 24 Feb 2010, 12:44 PM
Hello Meik Napierski,

I hope the following forum link will give some insight to achieving the required.
Center a single menu item

-Shinu.
0
Meik Napierski
Top achievements
Rank 1
answered on 25 Feb 2010, 10:42 AM
Sorry that doesn't work the menu item is stil left aligned. Only when i set the background image to the rmText the text will be automatically centered but then there is a great margin between the menu items which i can't minimize over css.
0
Yana
Telerik team
answered on 02 Mar 2010, 11:16 AM
Hi Meik Napierski,

Could you please send us the definition of the menu and the modified styles? Thanks

Greetings,
Yana
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.
0
Meik Napierski
Top achievements
Rank 1
answered on 03 Mar 2010, 10:20 AM

.RadMenu .rmRootGroup  
{  
    border-color: #C0C0C0;  
    background-color: #f0f0f0;  
    width: 100%;  
    height: 30px;  
    border-width: 1px;  
    border-style: none none solid none;  
}  
 
.RadMenu .rmRootGroup .rmIem      
{     
    border-style: none;  
    border-width: 0px;  
    background-image: url(../../Images/Backgrounds/buttons.png);  
    background-repeat: no-repeat;  
    background-color: Transparent;  
    height: 24px;  
    background-position: -5px -34px;  
    width: 75px;  
    margin: 2px;  
      
    line-height: 1.5em;  
}  
 
.RadMenu .rmRootGroup .rmItem .rmLink  
{  
      
    color: #4c7bb8;  
    text-decoration: none;  
}  
 
.RadMenu .rmRootGroup .rmItem .rmText  
{  
    font-family: Arial, Helvetica, sans-serif;  
    font-size: 11px;  
    font-weight: bold;  
<?xml version="1.0" encoding="utf-16"?>  
<Menu> 
  <Group> 
    <Item Text="Datei" AccessKey="A">  
      <Group> 
        <Item Text="Neuer Ordner" /> 
        <Item Text="Anwendungseinstellungen" Value="ApplicationSettings" /> 
        <Item Text="Eigenschaften" Value="ApplicationProperty" AccessKey="E"/>  
        <Item IsSeparator="true" /> 
        <Item Text="Beenden" Value="Exit" /> 
      </Group> 
    </Item> 
    <Item Text="Bearbeiten" AccessKey="B" > 
      <Group> 
        <Item Text="Kopieren"/>  
        <Item Text="Verschieben"/>  
        <Item Text="Löschen"/>  
        <Item Text="Umbenennen"/>  
        <Item IsSeparator="true" /> 
        <Item Text="Komprimieren"/>  
        <Item Text="Dekomprimieren"/>  
        <Item IsSeparator="true" /> 
        <Item Text="Berechtigungen"/>  
      </Group> 
    </Item> 
    <Item Text="Transfer" AccessKey="T" > 
      <Group> 
        <Item Text="Hochladen" Value="Upload"/>  
        <Item Text="Runterladen" Value="Download"/>  
      </Group> 
    </Item> 
    <Item Text="Hilfe" AccessKey="H" /> 
  </Group> 
</Menu> 

Hello,
here are the data file and the styles.

With best regards Meik Napierski
0
Yana
Telerik team
answered on 09 Mar 2010, 12:04 PM
Hello Meik Napierski,

Please excuse me for the delayed reply.

I've attached my test page based on your code which demonstrates how to center the text of the root items. Download it and try it.

All the best,
Yana
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items.
0
Meik Napierski
Top achievements
Rank 1
answered on 09 Mar 2010, 01:28 PM
Hello Yana,
thanks for your example. I adjust my style and now all item are centered :) thanks for your solution.

Greetings
Meik
0
sam
Top achievements
Rank 1
answered on 26 Jul 2010, 01:41 PM
Hello i was searching and i found this thread
Can somebody tell me how to  justify the text in the middle if I have an Icon for the item
this is my snippet
<Items>
                <telerik:RadMenuItem runat="server" Text="View Suppliers"  ImageUrl="~/Img/s.ico" Height="32px"
                    NavigateUrl="~/ManageSuppliers.aspx">
                </telerik:RadMenuItem>



please check the attached file to see the problem


Thanks for any help
0
Yana
Telerik team
answered on 29 Jul 2010, 02:44 PM
Hello Sam,

You should create a template and add the image and the text there:

<telerik:RadMenuItem>
    <ItemTemplate>
        <a href="~/ManageSuppliers.aspx"><img src="~/Img/s.ico"   />View Suppliers</a>
    </ItemTemplate>
</telerik:RadMenuItem>

and also add the following css styles to your page:

div.RadMenu .rmTemplate {text-align: center; }
div.RadMenu .rmTemplate a {text-decoration: none; color: #000; }
div.RadMenu .rmTemplate .rmText { padding: 0; }

Regards,
Yana
the Telerik team
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 Public Issue Tracking system and vote to affect the priority of the items
0
sam
Top achievements
Rank 1
answered on 01 Aug 2010, 07:28 PM
Yana thank you very much ..i tried it but it didn t work
anyway thanks for your help i appreciate it
Tags
Menu
Asked by
Meik Napierski
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Meik Napierski
Top achievements
Rank 1
Yana
Telerik team
sam
Top achievements
Rank 1
Share this question
or