[Drilldown Menu] Menu height is not dynamic

[mitchartifextech]

How can we reproduce this bug?

1. Add a nested section.
2. Ensure the nested UL has more children than on the parent menu.

What did you expect to happen?
I assumed the nested menu that animates in would grow tall enough to show all of the children.

What happened instead?

The root menu now has extra space below it, to accommodate the taller nested menu. For UI, this is not great, as it pushes content way below the menu. Ideally, the menu would grow if the nested section is taller.

Test case

http://lawyerb2b.atcdemo.com/ has the menu. Just shrink the screen below 1024px to show the Offcanvas menu.

See Screenshots here. http://screencast.com/t/4ap8MnzcfS http://screencast.com/t/8iAGj9C93mX

[zurbrandon]

This has been mentioned before, but there was never a clear idea as to what should happen on transition for a drill down. It felt far to jarring to have the menu just get taller and push the page down or up every time an item was selcted.

Thoughts?

[mitchartifextech]

Thank you so much for the reply. I really appreciate it.

I agree, that having the menu get taller would be janky, but there was a version that worked well in F5. It wasn't called drilldown, but topbar had a function that would do something "similar". I have it working on a site now. http://www.woundhealingfoundation.org/

It just slides the whole menu over to the left, revealing the submenu. That way, height isn't an issue at all.

[andycochran]

There are a few options:

1. Keep it as-is. Con: extra whitespace below top-level menu.
2. Set the Drilldown to overflow-y:visible and keep its height equal to the top-level menu. In this case, tall nested menus would overlap any content beneath (kinda like a Dropdown). Con: could be trouble on screens shorter than the nested menus.
3. Animate the height of the Drilldown as you transition between nested menus (kinda like an Accordion). Con: content will reflow.

The Drilldown menu pattern probably isn't the best choice if any of those caveats don't work for you. I imagine Drilldown is best used with Off-canvas or in a layout where there's nothing underneath it. If you're using Drilldown in the middle of content, you're probably better served by a Dropdown or Accordion.

[zurbrandon]

Thanks @andycochran and @mitchartifextech for weighing in.

I think for an off canvas example either 1 or 3 would work fine, since the background of the menu can be set to the background of the off canvas. For other use cases like when i menu is toggled open in page or just in page in general it still feels like finding the tallest child and setting a height feels the best. The jarring action of a slide that pushed the page content down still just feels super unappealing.

[gakimball]

Can we make it configurable, with the existing behavior being the default?

[gakimball]

We've gotten a number of requests for this now. We thought having the menu never change height would be more useful, but now it's looking like we need an option to configure that.

If someone wants to implement a dynamicHeight setting in drilldown (with false as the default, to retain the current behavior), we'll bring it in. :)

[ghost]

Great news! Thanks guys. I can do some beta testing if needed. I never felt it was too jarring and I come from a design/UI/UX background. Maybe if the menus are vastly different in height we leave it at default. If the menus are near the same height then toggle that new feature on :) 👍

[emri99]

thx @designerno1 ;)

@gakimball : Should we expect this pull request to be merged ?

[designerno1]

i think the feature will be in V6.3 Release

[jinch]

Has this feature been added, if so how do we implement?

[kball]

This will be in v6.3, due out beginning of next month. You would implement by adding data-auto-height="true" to your drilldown menu.

[gazgump]

Only tried to work this out for a short time before I googled it..... phew cheers!

[isapir]

@kball How do we use data-auto-height="true" with a responsive menu, e.g. data-responsive-menu="drilldown medium-dropdown"?

I tried to add data-auto-height="true" to the ul.menu but that didn't do anything.

Thanks!

[isapir]

I've tried to set autoHeight to true by default but that doesn't work either:

$(function(){

  Foundation.Drilldown.defaults.autoHeight = true;

  $(document).foundation();	// initialize Foundation framework
}

My Drilldown menu doesn't show all of the items that the Dropdown menu does.

To clarify:

It looks like the height does change "automatically", but it is capped at 720.375px; If I remove the overflow: hidden; constraint from is-drilldown, or if I manually set the height to 880.375px then I can see the whole submenu.

Is that a bug?

[isapir]

Sorry, the issue I'm experiencing is not about the height but about the position of the Drilldown submenu. I opened issue #10478