+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / How to space nav buttons equally in Sitefinity radmenu

How to space nav buttons equally in Sitefinity radmenu

8 posts, 0 answered
  1. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    15 Sep 2010
    Link to this post
    Hi Guys,

    I have a Radmenu which has 6 buttons in it which need to have equal spacing between them in my horizontal menu. I have managed to get this right using a percentage value but what if someone decides to add another menu button?

    Is there a way of aligning my UL menu in the middle of my wrapping DIV and then spacing the buttons equally.

    To top this off, the left button needs to be floated left and the rmLast button needs to be floated right, then the buttons needs to be distributed evenly.

    Many thanks!
    James
  2. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    15 Sep 2010
    Link to this post
    Hi James,

    Thank you for using our services.

    This is easily achievable with a static menu - one that is not dynamically bound and does not change its menu items. As for each item you add in the markup of the RadMenu control you can define unique CSS style rules.

    If however you are using a dynamically bound menu such as the SiteMenu what can be done is to subscribe to the DataBound event which executes when the menu is populated. Get the number of menu items on the first level and then iterate trough them to set the percentage of width they should occupy in the containing ul element. You can define float rules for .rmItem .rmLast from your custom skin and for .rmItem .rmFirst as well.

    All the best,
    Radoslav Georgiev
    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
  3. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    15 Sep 2010
    Link to this post
    Hi Radoslav

    Thanks for getting back to me so quickly, we will try your suggestion.

    What we need also is that once the menus have been generated dynamically and the menus spaced out evenly, the drop down menus need to be of equal width to it's parent menu.

    Can you tell me how to do that too please?

    Cheers,
    James
  4. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    15 Sep 2010
    Link to this post
    Hi Radaslov,

    I've managed to hack it for the meantime using jquery but this is not the optimal solution. I will wait to hear from you on the first issue.

    As for the submenu widths, how would I set these dynamically to the width of the parent menu item?

    Thanks,
    James
  5. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    16 Sep 2010
    Link to this post
    Hi Radoslav,

    Any joy with this one yet?

    Thanks!
  6. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    16 Sep 2010
    Link to this post
    Hello James,

    This should also be done with percentages. I have managed to make the drop downs having the same width as their parent element by using the bellow rules:
    .RadMenu_SitefinityBlue .rmSlide,
    .RadMenu_SitefinityBlue .rmVertical .rmGroup,
    .RadMenu_SitefinityBlue .rmSlide .rmVertical .rmGroup .rmLink
    {
        width:100% !important;
    }

    Best wishes,
    Radoslav Georgiev
    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. James@Nw
    James@Nw avatar
    265 posts
    Registered:
    05 May 2009
    20 Sep 2010
    Link to this post
    Hi Radoslav,

    This wants to work but not there yet. The submenu comes out at the correct width and then at the last second of the animation, it pops out to the default width (The width I think that Sitefinity's sitemenu renders at)

    I don't have the prohect online, but you can see the bottom two screenshots.

    One shows the the correct width as the animation comes out and the other as the animation completes when it pops out to the original width.

    Thanks,
    James
  8. Radoslav Georgiev
    Radoslav Georgiev avatar
    3370 posts
    Registered:
    01 Feb 2016
    20 Sep 2010
    Link to this post
    Hello James,

    I can see the problem on your side. Could you please inspect those elements to see if you have any other rules applied to those classes. May be some overflow rules. I am using the attached theme and have no problems with it. You can see that even if the item is 50 px the slider remains this size (I am setting width through CSS).

    All the best,
    Radoslav Georgiev
    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
Register for webinar
8 posts, 0 answered