unable to get Text in RootGroup to be Vertically Align into the Centre

7 posts, 0 answers
  1. David
    David avatar
    38 posts
    Member since:
    May 2013

    Posted 27 Aug 2013 Link to this post

    i've been searching for a way to get the Text of my Menu to be in the middle of the Tab. I've found different Forum posts, seemingly about the same thing as me, but they dont seem to work.
    here is my code so far

    <div style="height:20%;padding-top:50px;">
               <telerik:RadMenu ID="RadMenu1" Style="float:right;" Flow="Horizontal" runat="server">
                  
              <Items>
                  <telerik:RadMenuItem text="Messages"></telerik:RadMenuItem>
                  <telerik:RadMenuItem Text="Stock"></telerik:RadMenuItem>
                  <telerik:RadMenuItem Text="Cash"></telerik:RadMenuItem>
                  <telerik:RadMenuItem Text="Staff"></telerik:RadMenuItem>
                  <telerik:RadMenuItem Text="Reports"></telerik:RadMenuItem>
                  <telerik:RadMenuItem Selected="true" Text="Stock Admin" >
                     <GroupSettings Flow="Vertical" />
                      <Items>
                          <telerik:RadMenuItem Text="Admin"></telerik:RadMenuItem>
                          <telerik:RadMenuItem Text="Stock Admin"></telerik:RadMenuItem>
                      </Items>
                  </telerik:RadMenuItem>
              </Items>
          </telerik:RadMenu>
           </div>


    /*RadMenu Styles*/
    /*This is the new Menu that is on the Header.ascx control*/
     
      
         
         
        .RadMenu_Default .rmGroup .rmLink {
            padding-left: 0px ;      /*these two will give the Sub Menu Items their styling*/
        }
        .RadMenu_Default .rmGroup .rmLink .rmText {
            padding-left: 5px ;      /*these two will give the Sub Menu Items their styling*/
        }
     
        .RadMenu_Default  .rmRootGroup  .rmSelected
        {
            background:#f7931d; /*what happens when the Tab is 'Selected'*/           
          
        }
     
     
        div.RadMenu .rmRootGroup
        {
            /*all the border tags here, remove the black border that went round the entire Menu Control*/
            border-width:0px;    
            border-bottom:5px solid #f7931d;  
                  
        }
     
     
     
        div.RadMenu .rmGroup .rmItem .rmText
        {
            text-align:left;       
        }
     
        .RadMenu_Default .rmRootGroup .rmItem .rmText
        {
            text-align:center;
      
            /*the Border tags help to seperate each Root Menu Tab to make it look like its a seperate entity*/
            border-left:solid;          
            border-right:solid;
            border-left-color:white;
            border-right-color:white;                       
             
             
            width:70px; /*width of each Root Menu Items*/
            /*height:35px;    height of each Root Menu Items*/
            height:35px;
            color:#979797; /*colour of the text on Root and Sub Menu Tabs*/
            font-family:Helvetica, Arial, sans-serif;       
        }
      
     
     
        .RadMenu_Default .rmRootLink:hover span.rmText
        {
            /*this sets the text white for the Root Menu Items only, when hovering over the Root Menu Item*/
           color:white
        }
     
        .RadMenu_Default .rmGroup .rmLink:hover span.rmText
        {
            /*This sets the text white when hovering over the Sub Menu Items.*/
            color:white;
             
        }
     
        .RadMenu_Default .rmGroup .rmText
        {
            /*the border and background properties will remove the block on the left side of the Sub Menu Items where an icon would usually be placed.*/
             border: 1px solid #979797 ;
             background: #f0f0f0 ;                      
              
        }
      
        .RadMenu_Default .rmText:hover
        {
            background:#f7931d; /*background of tabs when moused over*/
            cursor: pointer; cursor: hand;
        }
     
        .RadMenu_Default .rmRootGroup
        {
            background: #f0f0f0 /*specify the colour of the Root Tabs. Without doing this, it gives a gradient colour scheme from top to bottom*/    
        }
     
        .RadMenu_Default
        {
            width:598px; /*width of the entire control*/                     
        }
     
    /*RadMenu Styles*/


    currently, the text in the Tabs (e.g 'Messages','Stock','Staff' etc) are Horizontally align so that they are in the centre of their respective Tabs - but Vertically, they are at the top.
    I would like to get it so that the text is slap-bang in the middle, Vertically as well as Horizontally.

    Is this possible?
    i've attached an image of how my menu looks. i've put black crosses in the places that i would like the text to be. i drew the black crosses free-hand, so their not perfectly central (i would like it to be perfectly central in my Application), but my idea is to give a visual representation of what i'm talking about.


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

    Posted 28 Aug 2013 Link to this post

    Hi David,

    Please check the following modification I applied to your CSS.

    CSS:
    .RadMenu_Default .rmRootGroup .rmItem .rmText
    {
        text-align: center; /*the Border tags help to seperate each Root Menu Tab to make it look like its a seperate entity*/
        border-left: solid;
        border-right: solid;
        border-left-color: white;
        border-right-color: white;
        width: 70px; /*width of each Root Menu Items*/ /*height:35px;    height of each Root Menu Items*/
        height: 35px;
        color: #979797; /*colour of the text on Root and Sub Menu Tabs*/
        font-family: Helvetica, Arial, sans-serif;

      line-height: 40px;

    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. David
    David avatar
    38 posts
    Member since:
    May 2013

    Posted 28 Aug 2013 Link to this post

    thats wonderful, Shinu! You've helped me a lot with my Menu.
  5. Keith
    Keith avatar
    1 posts
    Member since:
    May 2016

    Posted 20 May in reply to Shinu Link to this post

    Hi Shinu,

    I cannot use the line-height option because some of my navigation labels consist of 2 lines of text and the line height pushes the second line off the menu. Do you have any other suggestions for achieving vertical central alignment please.

    Keith

  6. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 25 May Link to this post

    Hi Keith,

    You can achieve vertical alignment with the "display:table-cell" approach:
    html .RadMenu_Default .rmHorizontal .rmRootLink span.rmText {
        display: table-cell;
        float: none;
        vertical-align: middle;
        height: 35px;
    }

    Do not hesitate to contact us if you have other questions.


    Regards,
    Magdalena
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. Keith
    Keith avatar
    1 posts
    Member since:
    Jun 2016

    Posted 21 Jun in reply to Magdalena Link to this post

    Thanks Magdalena,

    That works great the other issue I have is trying to get the RadMenu to fill 100% of the width. It seems I have to set  the width of the individual items  to best fill the width, setting width =100% seems to destroy the menu. By default the width is set to the nav link text width but I would like the menu to be more responsive.

    Thanks

    Keith

  8. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 23 Jun Link to this post

    Hello Keith,

    Could you please open a support ticket and provide us with a runnable sample with 2 screenshots so we will assist you in more efficient way?

    The screenshot should be the following:
    1. the current layout
    2. the expected layout

    Looking forward to your reply.

    Regards,
    Magdalena
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017