Some demos not working

[navigatrum]

Description I'm experiencing the same bug described here: https://stackoverflow.com/questions/71876803/how-to-get-the-demo-of-the-internet-archive-bookreader-working-in-2022

The problem seems related to css var: --br-height not being defined, so that:

.BookReader {
    height: var(--br-height);
  ...
}

in BookReaderDemo.css#L32-L36 sets the height to 0 for the elements of class BookReader in the following, not-working, demos:

• demo-advanced.html
• demo-iif
• demo-multiple.html
• demo-preview-pages.html
• demo-simple.html
• immersion-1up.html
• viewmode-cycle.html

The problem doesn't affect full-screen-like demos such as demo-fullscreen-mobile.html where the height for .BookReader is defined inline in the head (https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-fullscreen-mobile.html#L24-L27).

And the problem doesn't affect internet-archive-like demos such as demo-internetarchive.html where the div with id BookReader is inside a <ia-bookreader> tag (https://github.com/internetarchive/bookreader/blob/master/BookReaderDemo/demo-internetarchive.html#L45-L61) whose --br-height var is defined in BookReaderDemo.css#L26-L30.

Proposal The problem could be solved by adding an inline css rule in the head of not working demos, similary to what is done for full-screen demos :

.BookReader{--br-height: calc(100vh - 100px)}

Or perhaps by adding a similar rule directly in BookReaderDemo.css [edited: typo]

[xonx4l]

ADDED SIMILAR TO BookReaderDemo.css