RadMenu center menu text

[Meik Napierski]

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

 

[Shinu]

Hello Meik Napierski,

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

-Shinu.

[Meik Napierski]

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.

[Yana]

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.

[Meik Napierski]

.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

[Yana]

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.

[Meik Napierski]

Hello Yana,
thanks for your example. I adjust my style and now all item are centered :) thanks for your solution.

Greetings
Meik

[sam]

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

[Yana]

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

[sam]

Yana thank you very much ..i tried it but it didn t work
anyway thanks for your help i appreciate it