This is a migrated thread and some comments may be shown as answers.

Stretch Menu left when right aligned

5 Answers 94 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Clyde
Top achievements
Rank 1
Clyde asked on 01 Jun 2012, 08:05 PM
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

5 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 04 Jun 2012, 05:17 AM
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.
0
Clyde
Top achievements
Rank 1
answered on 04 Jun 2012, 12:45 PM
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
0
Accepted
Princy
Top achievements
Rank 1
answered on 05 Jun 2012, 09:21 AM
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.
0
Clyde
Top achievements
Rank 1
answered on 05 Jun 2012, 04:11 PM
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
0
jlj30
Top achievements
Rank 2
answered on 13 Dec 2012, 04:40 PM
Clyde,

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

Jim
Tags
Menu
Asked by
Clyde
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Clyde
Top achievements
Rank 1
jlj30
Top achievements
Rank 2
Share this question
or