RadMenu center menu text

10 posts, 0 answers
  1. Meik Napierski
    Meik Napierski avatar
    28 posts
    Member since:
    Sep 2009

    Posted 24 Feb 2010 Link to this post

    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

     

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 24 Feb 2010 Link to this post

    Hello Meik Napierski,

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

    -Shinu.
  3. Meik Napierski
    Meik Napierski avatar
    28 posts
    Member since:
    Sep 2009

    Posted 25 Feb 2010 Link to this post

    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.
  4. Yana
    Admin
    Yana avatar
    5030 posts

    Posted 02 Mar 2010 Link to this post

    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.
  5. Meik Napierski
    Meik Napierski avatar
    28 posts
    Member since:
    Sep 2009

    Posted 03 Mar 2010 Link to this post


    .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
  6. Yana
    Admin
    Yana avatar
    5030 posts

    Posted 09 Mar 2010 Link to this post

    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.
  7. Meik Napierski
    Meik Napierski avatar
    28 posts
    Member since:
    Sep 2009

    Posted 09 Mar 2010 Link to this post

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

    Greetings
    Meik
  8. sam
    sam avatar
    52 posts
    Member since:
    Feb 2008

    Posted 26 Jul 2010 Link to this post

    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
  9. Yana
    Admin
    Yana avatar
    5030 posts

    Posted 29 Jul 2010 Link to this post

    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
  10. sam
    sam avatar
    52 posts
    Member since:
    Feb 2008

    Posted 01 Aug 2010 Link to this post

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