How to make plugins responsive

[amansani15]

Hello, thanks for the nice library.

When I resize the window using multiple plugins, few of them are not within the box. I know this is something to do with the css, but just wondering if you already have any fix on that. Like if I use toolbar plugin, then the options within the toolbar will get adjusted according to the size of the screen. How can we make this work with individual multiple plugins?

`<div
className="rpv-core__viewer"
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
display: 'flex',
flexDirection: 'column',
height: '100%',
width: '100%',
}}
>

        <div
            style={{
                alignItems: 'center',
                backgroundColor: '#eeeeee',
                borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
                display: 'flex',
                justifyContent: 'center',
                padding: '4px',  
                position: 'relative'                  
            }}
        >
            <div style={{ padding: '0px 2px'}}>
                <GoToFirstPageButton />
            </div>                
            <div style={{ padding: '0px 2px' }}>
                <GoToPreviousPage />
            </div>
            <div style={{ padding: '0px 2px', width: '4rem' }}>
                <CurrentPageInput />
            </div>
            <div style={{ padding: '0px 2px' }}>
                <GoToNextPageButton />
            </div>
            <div style={{ padding: '0px 2px' }}>
                <GoToLastPageButton />
            </div> 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div style={{ padding: '0px 2px' }}>
                Search:                     
            </div>
            <div style={{ padding: '0px 2px' }}>                   
                <ShowSearchPopoverButton />
            </div> 
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div style={{ padding: '0px 2px' }}>
                <CurrentPageLabel>
                    {(props: RenderCurrentPageLabelProps) => (
                        <span>{`${props.currentPage + 1} of ${props.numberOfPages}`}</span>
                    )}
                </CurrentPageLabel>
            </div>
            <div style={{ padding: '0px 2px' }}>
                <ZoomOutButton />
            </div>
            <div style={{ padding: '0px 2px' }}>
                <ZoomPopover />
            </div>
            <div style={{ padding: '0px 2px' }}>
                <ZoomInButton />
            </div>
            <EnterFullScreenButton />
            <DownloadButton />
            <OpenButton />
            <PrintButton />
            <ShowPropertiesButton />
        </div>
        
        <div
            style={{
                flex: 1,
                overflow: 'hidden',
            }}
        >                
            <Worker workerUrl="https://unpkg.com/pdfjs-dist@2.6.347/build/pdf.worker.min.js">                        
                <Viewer fileUrl={fileUrl} plugins={[pageNavigationPluginInstance, searchPluginInstance, fullScreenPluginInstance, getFilePluginInstance, openPluginInstance, printPluginInstance, propertiesPluginInstance, zoomPluginInstance]} initialPage={pageNumber} defaultScale={SpecialZoomLevel.PageFit}> 
                </Viewer>
            </Worker>
        </div>
    </div>`

[phuocng]

You have to do it yourself. The library can't deal with the custom toolbar.

[amansani15]

Okay, thank you.