OpenSeaDragon: Full Screen Toolbar Position

Question

I am creating an OpenSeaDragon viewer with a custom toolbar. It seems that irrespective of the position of the toolbar in normal mode, the toolbar will be placed on the top of the screen when entering full screen mode. I've tried searching through the OpenSeaDragon documentation but could not even find any mentions on custom toolbar.

I currently set up the viewer like this:

<div class="grid-panel">
    <div class="top">
        <div id="vPnl">

        </div>
    </div>
    <div class="footer">
        <div id="vFooter">
            <a href="#" id="vZoomIn">Zoom In</a>
            <a href="#" id="vZoomOut">Zoom Out</a>
            <a href="#" id="vHome">Home</a>
            <a href="#" id="vFullScreen">Full Screen</a>
        </div>
    </div>
</div>

And I instantiate the viewer with this:

bs.bkViewer = OpenSeadragon({
            id: "vPnl",
            prefixUrl: "/lib/openseadragon/images/",
            tileSources: {
                . . .
            },
            defaultZoomLevel: 0.3,
            toolbar: 'vFooter',
            zoomInButton: 'vZoomIn',
            zoomOutButton: 'vZoomOut',
            homeButton: 'vHome',
            fullPageButton: 'vFullScreen'
        });

I would like to be able to control the position of the toolbar after entering full screen mode, is that possible? Thanks!

Answer 1

Looks like you need to add some styling for it. OpenSeadragon adds the fullpage class which you can use in your selector. Note that OpenSeadragon also adds position: relative which you will likely need to override with !important. For example:

#vFooter.fullpage {
    position: absolute !important;
    left: 20px;
    bottom: 20px;
}