Stretch Menu left when right aligned

6 posts, 1 answers
  1. Clyde
    Clyde avatar
    41 posts
    Member since:
    Feb 2008

    Posted 01 Jun 2012 Link to this post

    Scratching my head on this one. I have a menu that should stretch across the page, so width:100%. That part works, the menu displays correctly.

    What I would like to do is shift the root menu items to align from the right towards the left, leaving a space where they end.

    Is this even possible?

    Here is two images to help visualize what I need.

    Thanks
    Clyde
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Jun 2012 Link to this post

    Hi Clyde,

    Try setting width and dir properties of RadMenu as follows.

    ASPX:
    <telerik:RadMenu ID="RadMenu1" runat="server" dir="rtl" Width="100%">
        .........
    </telerik:RadMenu>

    Please take a look into this demo for more information.

    Hope this helps.

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Clyde
    Clyde avatar
    41 posts
    Member since:
    Feb 2008

    Posted 04 Jun 2012 Link to this post

    Hi Princy,

    Unfortunately that does not give me the desired affect. I had given it a try, but need a left-to-right menu just aligned within the top row to the right. Not the actual element/nodes with their cell, but the entire top row.

    This is more for aesthetic reasons than anything else. It just would be good to have the menu bar at 100% width, but as you can see in the image menu2.jpg, extend all the way to the left, under that other image that is "hanging" down.

    Thanks
    Clyde
  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Jun 2012 Link to this post

    Hi Clyde,

    Try setting CssClass property of first RadMenuItem as follows.

    CSS:
    <style type="text/css">
      .menuitem
       {
         margin-left:200px;  //required margin for RadMenuItem1
       }
    </style>

    ASPX:
    <telerik:RadMenu ID="RadMenux" runat="server" Width="100%" >
      <Items>
        <telerik:RadMenuItem Text="RadMenuItem1" CssClass="menuitem">
        </telerik:RadMenuItem>
        .....
      </Items>
    </telerik:RadMenu>

    Hope this helps.

    Thanks,
    Princy.
  6. Clyde
    Clyde avatar
    41 posts
    Member since:
    Feb 2008

    Posted 05 Jun 2012 Link to this post

    Thanks Princy, you pointed me in the right direction. The key is to work with the margin-left of the first element. Given that this menu is dynamically generated and can be changed at any time, I am not able to hardcode in any fixed lengths.

    So I took this a step further and put together some javascript that can detect the size of the existing menu and then alter it in onclientload.

    <script type="text/javascript">
        var siteWidth = 980;
         
        function OnMenuLoad(sender) {
            var items = sender.get_items();
            var menuDomElement = sender.get_element();
            var itemWidth = siteWidth - menuDomElement.offsetWidth;
            var item = items.getItem(0).get_element();
            item.style.marginLeft = itemWidth+'px';
        }
    </script>

    <telerik:RadMenu ID="RadMenu2" runat="server" Style="z-index: 1900;" Skin="Default" SkinID="HMenu" OnItemDataBound="RadMenu_ItemDataBound" OnClientLoad="OnMenuLoad">
    </telerik:RadMenu>

    The siteWidth var can be populated from the code behind if you have a variable size site.

    Seems to work well. Documented here for the next person to ask this question.

    Regards
    Clyde
  7. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 13 Dec 2012 Link to this post

    Clyde,

    Thanks for posting your script.
    It was just what I needed.

    Jim
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017