conflict with bootstrap

[garrett-laroy-johnson]

the bug In trying to bind a page that's organized with bootstrap 3 grid, Bindery is making one page with no flow to other pages.

To Reproduce contents.html `

lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod enim ut dolor dapibus aliquam. Fusce pulvinar eros massa, id consectetur neque ultrices at. Donec ac nibh fermentum mi elementum tempor vitae consectetur tortor. Nam porta fringilla molestie. Etiam ullamcorper vel diam eleifend fringilla. Cras sagittis eleifend nibh vel consequat. Suspendisse posuere mauris leo, eget tincidunt libero vehicula eget. Quisque dictum, dui in tristique vehicula, est metus volutpat tellus, et vestibulum mauris eros eget quam. Curabitur ut sagittis purus.

Interdum

Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vel orci nisi. Morbi est velit, varius ut nunc ut, auctor dignissim odio. Aliquam a lacus ligula. Maecenas dictum et quam vitae finibus. Morbi facilisis accumsan mi, sed facilisis odio aliquet sed. Donec in lectus in massa pellentesque convallis vitae non magna. Suspendisse non odio id lacus congue rhoncus cursus nec orci. Integer ac quam purus. Nulla pharetra lobortis euismod. Aenean at suscipit est. Donec sollicitudin felis eget gravida vestibulum. Vivamus eget purus et massa feugiat lacinia. Proin eu ultricies sem. Donec et sem felis. Praesent turpis nunc, sollicitudin nec pretium eu, vehicula eu lectus.

nostra

Curabitur ornare mauris sed diam aliquam hendrerit. Aliquam ac sodales sapien. Nulla aliquam faucibus nunc et commodo. In hac habitasse platea dictumst. Morbi a nibh quis ipsum pretium vestibulum nec a mauris. Maecenas imperdiet lacus et ex dignissim ullamcorper. In et tortor id nulla faucibus sagittis quis at mi. Duis sollicitudin mattis ligula, nec ultrices leo suscipit vel. Nullam a mauris sagittis, convallis nibh a, gravida libero. Sed a vestibulum odio, sed luctus nisl. Vestibulum pharetra non nibh et mattis. Curabitur tempor gravida tincidunt. Nunc sed auctor augue.

risus

Proin dapibus gravida risus in dapibus. Nulla a libero eget ligula volutpat maximus ut ac metus. Morbi non posuere mi, at dignissim mi. Ut eu consectetur lectus. Nullam gravida porta orci posuere ullamcorper. Integer malesuada lobortis elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam tellus eros, auctor sit amet ipsum a, facilisis lobortis magna. Morbi sed eros tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tempor nulla quis elit dapibus sollicitudin ac vel quam. Donec lacinia turpis at risus sollicitudin aliquet. Integer in enim id felis rutrum pellentesque id ac mi.

risus

Proin dapibus gravida risus in dapibus. Nulla a libero eget ligula volutpat maximus ut ac metus. Morbi non posuere mi, at dignissim mi. Ut eu consectetur lectus. Nullam gravida porta orci posuere ullamcorper. Integer malesuada lobortis elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam tellus eros, auctor sit amet ipsum a, facilisis lobortis magna. Morbi sed eros tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tempor nulla quis elit dapibus sollicitudin ac vel quam. Donec lacinia turpis at risus sollicitudin aliquet. Integer in enim id felis rutrum pellentesque id ac mi.

risus

Proin dapibus gravida risus in dapibus. Nulla a libero eget ligula volutpat maximus ut ac metus. Morbi non posuere mi, at dignissim mi. Ut eu consectetur lectus. Nullam gravida porta orci posuere ullamcorper. Integer malesuada lobortis elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam tellus eros, auctor sit amet ipsum a, facilisis lobortis magna. Morbi sed eros tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tempor nulla quis elit dapibus sollicitudin ac vel quam. Donec lacinia turpis at risus sollicitudin aliquet. Integer in enim id felis rutrum pellentesque id ac mi.

risus

Proin dapibus gravida risus in dapibus. Nulla a libero eget ligula volutpat maximus ut ac metus. Morbi non posuere mi, at dignissim mi. Ut eu consectetur lectus. Nullam gravida porta orci posuere ullamcorper. Integer malesuada lobortis elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam tellus eros, auctor sit amet ipsum a, facilisis lobortis magna. Morbi sed eros tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin tempor nulla quis elit dapibus sollicitudin ac vel quam. Donec lacinia turpis at risus sollicitudin aliquet. Integer in enim id felis rutrum pellentesque id ac mi.

`

index.html `

`

Expected behavior Text was meant to flow across many pages, here it seems it is truncated after 1.

Screenshots

Desktop (please complete the following information):

• OS & Browser: [Window 11 & Firefox]
• bindery.js version [e.g. 2.3.0]

Additional context bootstrap 3 is an older library which I use out of habit over bootstrap 4 or 5, but still works fine in other contexts.

[evnbr]

Hi Garrett, thanks for the clear steps, I have a few ideas.

It looks like this version of bootstrap uses float for positioning columns, and you have applied columns to the outermost #content container. The problem is that float takes content out of the normal flow of the page, so when bindery tries to measure the page to detect overflow, it always looks 0px tall.

Some potential workarounds:

1. Remove the column classes from the outermost element. I can't tell if they are doing anything in this example, this might not work for your real site.

   <div id="content"> ... </div>
   

2. Specifically turn off float with an inline style. Again, this seems fine for the example, again might not work for your real site.

   <div id="content" class="col-xs-12 col-sm-12" style="float: none"> ... </div>
   

3. Same as 2, but set it in javascript so it only takes affect when using bindery. This would need to be called somewhere before calling makeBook, and would only work if your content was on the same page and not being fetched from a separate file.

   document.querySelector("#content").style.float = "none";
   Bindery.makeBook({...});
   

4. Use a newer version of boostrap that doesn't rely CSS float. It looks like the most recent versions use flexbox which should work better.

Here's a working example of approach #3: https://codepen.io/brsev/pen/YzYRRZe

Let me know if any of those work for you and best of luck with your book.