Syncfusion Accordion + Syncfusion Menu

[Steven Sinakhot]

Hello,

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])

                {

                    @link

                }

            </ul>

            @{Html.Syncfusion().Menu(key.Replace(' ', '_').Insert(0, "LeftMenu"), new { style = "outline:0 none;" })

                        .Mode(MenuModel.ModeType.NormalMenu)

                        .Orientation(MenuModel.MenuOrientation.Vertical)

                        .Render();}

        </div>

    </div>

    

    @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]

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.

 

<code>

<script type ="text/javascript">

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

                .Mode(MenuModel.ModeType.NormalMenu).Orientation(MenuModel.MenuOrientation.Vertical).Render();

            }

 

  $(function () {

         $('#myAccordion').accordion({

             heightStyle: "content",

              });

     });

 

</script>

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

[_Layout.cshtml]

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

[Web.Config]

<appSettings>

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

</appSettings>

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

 

</code>

 

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,

Gurunathan