Menu Text Align

4 posts, 0 answers
  1. Grant
    Grant avatar
    25 posts
    Member since:
    Feb 2014

    Posted 05 Aug 2014 Link to this post

    Hi

    I have a menu with text in it that I need to center align.

    Problem is two of the menu items have longer text in them so I need to individually align them to the right,
    but I cant do that because it conflicts with the currents css class used for all the menu items.

    Grant.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Aug 2014 in reply to Grant Link to this post

    Hi Grant,

    Please try the below CSS to achieve your scenario. Try to change the margin-left based on your scenario.

    CSS:
    .RadMenu .rmVertical .rmItem .rmText
    {
        text-align: center;
        margin-left: 10%;
    }

    Let me know if you have any concern.
    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Grant
    Grant avatar
    25 posts
    Member since:
    Feb 2014

    Posted 05 Aug 2014 in reply to Princy Link to this post

    Hi Princy,

    Thanks for the quick response.

    That didn't change anything.

    My current ccs are:
    .rmText
    {
        text-align: center;
        line-height: 50px;
         
    }

    and 

    .rmRootGroup .rmItem
    {
        background-color: #ccc
        height: 60px;
        width: 95px
        margin: 2px
        padding-top :20px;
        line-height: 1em;
        font-size:60px;
        border-radius:5px;
         
    }


  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Aug 2014 in reply to Grant Link to this post

    Hi Grant,

    Please have a look into the sample code snippet which works fine at my end. Try to replicate the issue in the provided code for further help.

    ASPX:
    <telerik:RadMenu ID="rmenuItems" runat="server" Flow="Horizontal" Width="500px" Skin="Web20"
        Height="20px" ClickToOpen="true">
        <Items>
            <telerik:RadMenuItem Text="Main Menu">
                <Items>
                    <telerik:RadMenuItem Text="Assign Scratchcards" ImageUrl="../Images/plus.gif">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="View Voucher" ImageUrl="../Images/plus.gif">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Deactivate Voucher" ImageUrl="../Images/plus.gif">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

    CSS:
    .RadMenu .rmVertical .rmItem .rmText
    {
        text-align: center;
        line-height: 50px;
        margin-left: 10%;
    }
    .rmRootGroup .rmItem
    {
        background-color: #ccc;
        height: 60px;
        width: 95px;
        margin: 2px;
        padding-top: 20px;
        line-height: 1em;
        font-size: 60px;
        border-radius: 5px;
    }

    Thanks,
    Princy.
Back to Top