We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Syncfusion Accordion + Syncfusion Menu

Thread ID:





112414 Sep 20,2013 06:40 PM UTC Sep 25,2013 11:21 AM UTC ASP.NET MVC (Classic) 1
Tags: Tools
Steven Sinakhot
Asked On September 20, 2013 06:40 PM UTC


I am trying to setup a Syncfusion Menu within a Syncfusion Accordion div.

This is my partialview:

@model MenuViewModel
@foreach (string key in Model.LeftMenuList.Keys)
    <div id="@key.Replace(' ', '_')" class="menu" style="visibility: hidden;">
        <h3><a rel='nofollow' href="#" style="padding: 0px; margin-left:30px; margin-bottom:10px">@key</a></h3>
        <div style="padding: 0px !important;">
            <ul id="@key.Replace(' ', '_').Insert(0, "LeftMenu")"  style="visibility: hidden;display:inline-block !important;">
                @foreach (MvcHtmlString link in Model.LeftMenuList[key])
            @{Html.Syncfusion().Menu(key.Replace(' ', '_').Insert(0, "LeftMenu"), new { style = "outline:0 none;" })
    @Html.Syncfusion().Accordion(key.Replace(' ', '_')).Collapsible(true).Active(-1)

The only issue is that the Accordion is not expanding its height properly. 
If I manually set the height here:
@{Html.Syncfusion().Menu(key.Replace(' ', '_').Insert(0, "LeftMenu"), new { style = "outline:0 none;" })

It will expand the accordion properly but if my left menu is dynamic it will not be able to shrink or grow.
Is there a fix for this issue so the Accordion will expand properly?

here is my css file

.menu a {
    font-size:20px !important;
    height: 20px !important;

Steven Sinakhot

Gurunathan A [Syncfusion]
Replied On September 25, 2013 11:21 AM UTC

Hi Steven,

Thanks for contacting Syncfusion support.


When placing Menu control inside Accordion control, the height of Accordion control depends upon the content present in that. So we suggest you to set the heightstyle to ‘content’ in script and also set height for Menu control. Please refer the following code snippet.



<script type ="text/javascript">

@{Html.Syncfusion().Menu("MyItemsMenu", new { style = "outline:0 none; height: 133px;" })




  $(function () {


             heightStyle: "content",





Note : Heightstyle : ‘content’  supports above Jquery – UI 1.9.1. So Please refer the below given code snippet which explains the steps when we refer the Jquery UI 1.9


<script src='@Url.Content('~/Scripts/jquery-ui.js')' type='text/javascript'></script>



<add key='sfJqueryload' value='false'/>


Note: The above given code should be used only if you have added the jquery-ui file explicitly in your sample. This will avoid the conflict of different version of jquery-ui since this script will also be loaded internally from our source




If you want to increase the height of Accordion content on mouse hovering in Menu control. We suggest you to add the popup menu height to the height of Accordion control in ClientSideMouseOver and ClientSideMouseOut manually.



Note:  If we have misunderstood your query, could you please provide the sample which illustrates this issue. It will help us to work on efficient way and provide a proper sample.


Please let us know if you have further queries.


Warm Regards,




This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon