Printing the parts list for a set by default prints a lot of unnecessary elements on the first page and breaks across some of the grid tiles.
I fixed the breaking with this style:
.js-part {
page-break-inside: avoid;
}
Which I can inject with javascript:
const style = document.createElement('style');
style.textContent = `
.js-part {
page-break-inside: avoid;
}
`;
document.head.appendChild(style);
Next, I needed to remove all the unnecessary elements in the page. Of course, if this is just a one-off print then it’s probably easier to remove the elements by inspecting them with the browser devtools. But since I’ll be doing this several times I turned to javascript to make it repeatable:
document.querySelectorAll('nav, .heading-title, #inventory > .row, #inventory > .mt-10, .flexslider, .flexslider-controls-container-sets, .nav-tabs, footer').forEach(el => el.remove())
Just with that it prints much nice but there’s still some unnecessary whitespace and container elements. Instead of trying to remove all the elements (some of which were hard to target) I came up with the following to move the main content higher up the DOM tree:
var source = document.getElementById('parts_standard')
var minifigs = document.getElementById('parts_minifig')
var target = document.querySelector('#content > .container')
target.innerHTML = source.innerHTML
target.append(minifigs)
This prints the cleanest but can sometimes cause the page to re-fetch the images which causes half to fail to load.
I made this in bookmarklets for easy one-click execution. Drag one of these to the bookmarks bar to install:
- Rebrickable Print — removes extra elements, keeps original layout
- Rebrickable Print (clean) — replaces page with just the parts list and removes extra elements (may cause some images to fail to load)