Menu contents get cut off when content is shorter than menu

[FlorianElischer]

If there are just a few links, everything works fine. But if there would be a long list of links, I can't scroll down to the bottom of them due to no available height for the ul in the #menu div.

[tylersticka]

Hmm, that's not good. The plugin should be setting the outer wrapper height based on the tallest element (body content or menu).

Is the menu content taller than the page content?
—
Sent from Mailbox for iPad

On Mon, Jul 22, 2013 at 7:04 AM, FlorianElischer [email protected]
wrote:

If there are just a few links, everything works fine. But if there would be a long list of links, I can't scroll down to the bottom of them due to no available height for the ul in the #menu div.

Reply to this email directly or view it on GitHub:
#17

[FlorianElischer]

I tested it again. Once with more content, once with more links to get different heights to compare. Only if the content area is higher than the link area, all links are visible. If not they got cut. Would be cool if you could fix this problem. Thx!

[tylersticka]

Thanks for clarifying! I've marked this as a bug and modified the issue title to reflect what needs to be fixed.

I actually saw this myself on a project a while back, but it seemed to remedy itself and I thought I was going crazy. Good to know I wasn't! I'll look into a fix soon.

In the meantime, if you're getting something ready for production and you can't wait for a fix, a stop-gap solution would be to give your content container a min-height that's about as large as you expect the menu contents to be. You can apply this selectively by using the off-canvas-menu class:

.off-canvas-menu .my-content-container {
  min-height: 400px; /* or whatever it should be */
}

I'll update this issue when I've committed a fix.

[tylersticka]

@FlorianElischer Hmm, that seemed almost too easy to resolve. Would you mind trying out the latest build and confirming whether or not it resolves the issue?

[FlorianElischer]

It's working now :) Thanks!

[tylersticka]

Wonderful! 👍

[mattpage]

This fix has been reverted.
See #19
We need to revisit this and come up with a solution that does not cause a FOUC.

[sieumeo]

The menu currently gets a flashy cut off for about 1/10 second whenever activated on iOS browsers, due to inner-wrapper height changed from 0px to max height. I temporarily fixed it in my projects by specifying min-height for .inner-wrapper at plugin init to prevent the cut off flash. Suggest not to change inner-wrapper height when activate/deactivate menu?

[tylersticka]

@sieumeo What did you set min-height to?

Would you be comfortable forking the repo and submitting a pull request (assuming your changes were made to the Coffeescript source file)?

[sieumeo]

No I didn't modify the plugin but added a new CSS rule for inner-wrapper right after menu.on();

menu.on();
$(".inner-wrapper").css("min-height",Math.max($(window).height(), $(document).height(), $("body").prop('scrollHeight'))); // fix menu glitch

UPDATE: For some projects with fixed menu, I simply added a fixed min-height directly to the CSS file.

[tylersticka]

The drawback with that solution is that if the height changes (maybe additional images load, maybe the content is dynamic, maybe a web font hadn't loaded yet, etc.) the height may be out of date.

Will look into it, thanks for the additional detail. The current setHeight/clearHeight logic was created to make the plugin more compatible with Internet Explorer, which was having some issues with reported heights. Potentially we could make this a setting of some sort...

[sieumeo]

Maybe a test to see if the browser is IE at plugin init, then we'll only
clearHeight later if it is?

Thanks and Best Regards,
Phan Tuan Anh

On Tue, Aug 27, 2013 at 11:20 PM, Tyler Sticka [email protected]:

The drawback with that solution is that if the height changes (maybe
additional images load, maybe the content is dynamic, maybe a web font
hadn't loaded yet, etc.) the height may be out of date.

Will look into it, thanks for the additional detail. The current
setHeight/clearHeight logic was created to make the plugin more compatible
with Internet Explorer, which was having some issues with reported heights.
Potentially we could make this a setting of some sort...

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/17#issuecomment-23349756
.