minimap initialized but hidden from view

pawel2105 commented 10 years ago

Hi Nathaniel.

I've added the minimap plugin and have activated it with:

$(document).ready( function() {
  $('.body_column').minimap();
  // I have even tried adding:
  $.minimap.show();
});

This creates the aside in the DOM, but when inspecting the page, the element has no height and doesn't show anything in itself, even when adding an absolute height. I think this may have to do with html or body not having min-height set to 100% as I've been able to recreate it when forking your demo page.

You can see my broken demo here: http://www.mybema.com/the-ultimate-customer-service-cheatsheet

Cheers.

goldenapples commented 10 years ago

Yeah, I see the issue you're having.

This plugin depends on both the minimap and the column that it clones having a containing element with a fixed height and overflow scrolling set. In the demo, that works because the body is set to 100% of the height of the viewport, and the default overflow: scroll value allows the body content to scroll within that box.

It will be harder to make this work in a setup like your page, where the element you want the minimap attached to is far down the page, and flows with other content. You could do it by wrapping the <div class="mybema-insights-feature-description..."> in a containing div that was set to the height of the viewport. I'm not sure how well that would actually work across browsers, though. "position: sticky" would make it easy on iOS/Safari, but I think you would need to polyfill that behavior with Javascript for other browsers.

I haven't figured a good way of addressing these kinds of cases in the plugin. If you have any ideas, let me know.

pawel2105 commented 10 years ago

Not sure I follow. To simplify everything (same link above is now applicable), I've moved the body_column class so that the structure is now:

<body>
  <div id='container'>
    <div class='body_column'>

The #container element has min-height: 100% and is the wrapper to the body_column div which is being targeted. This still doesn't work.

Are you able to view the minimap on this page by manipulating properties in developer tools?

goldenapples / jquery.minimap

minimap initialized but hidden from view #4