CSS: More Button, w/ Bootstrap & Firefox

I think this problem is very specific to Firefox and maybe even specific to working within a bootstrap environment. I’m using the “div” model and a custom template.

Issue: The more button appears next to the alm-listing div, even if it’s not floated, and even if the width is 100% of the parent div, and even if I meanually set “position: relative;” on all alm elements.

Theory: Because the wrap is loaded without content, these two rules:

box-sizing: border-box; \\ from bootstrap
overflow: hidden; \\ from plugin CSS

Combine to give the element alm-btn-wrap 0 width. At the same time, alm-listing has 0 height. Viewing the box-model in FF shows that these values never change, even as content is appended.

When the initial page layout is blocked out, FF places them both in the same place (??). When the button is appended, because it is an inline-block element, it does not force the wrap to change width. Setting width or min-width rules on the wrapper makes no difference.

Frankly, this seems like a FF bug.

Solution: when I added this rule to my stylesheet:

.alm-btn-wrap { overflow: visible }

Everything works. The overflow being visible does not seem to affect any other layout.

Thanks for the plugin, otherwise very slick.

https://www.ads-software.com/plugins/ajax-load-more/