Support width in percentage

[lfoppiano]

As requested in https://discuss.streamlit.io/t/streamlit-pdf-viewer/57768/3

Is there a way to set the width of the displayed pdf to 100%? Something like this?

pdf_viewer(input=binary_data, width="100%", height=1000)

[lfoppiano]

Some references: https://discuss.streamlit.io/t/pdf-viewer-how-to-achieve-reactive-layout/46283

[Odrec]

Maybe this will help you. I managed a workaround for my case where I set the width to a percentage of the screen size. I get the screen size of the device using this component: https://github.com/aghasemi/streamlit_js_eval

and then I do:

            pdf_viewer(input=self.doc_binary_data, annotations=self.annotations, height=1000,
                       width=int(self.screen_width*0.4))

[Odrec]

I was trying things further and I found a better solution. The problem with using the screen width is that it works nicely if you have the browser in your device in full screen but if you resize, the PDF doesn't resize with it and remains too big. So what you really need is a width percentage relative on the size of the main component of the streamlit app or relative to the component the pdf is displayed in (column, container, etc). This library allowed that for me but be aware that is 2 years old: https://github.com/avsolatorio/streamlit-dimensions.

With this I can get the width of the main component of the streamlit app like this:

self.main_dim = st_dimensions(key="main")
and then I can use that to set the width relative to the main component size like this

pdf_viewer(input=self.doc_binary_data, annotations=self.annotations, height=1000,
                       width=int(self.main_dim['width'] * 0.4))

So now the PDF resizes nicely when I resize my browser or in a mobile app as well

[lfoppiano]

The issue seems to be related to the inner height which is not provided by streamlit (ref: #39 (comment)), this is valid also for other way of covering the whole section of the application

A couple of relevant references:

• Responsive / Adaptive Widths & Sizes streamlit/streamlit#708 (comment)
• Responsive / Adaptive Widths & Sizes streamlit/streamlit#708 (comment)

[lfoppiano]

So now the PDF resizes nicely when I resize my browser or in a mobile app as well

Does it resize automatically or you need to reload?

[Odrec]

So now the PDF resizes nicely when I resize my browser or in a mobile app as well

Does it resize automatically or you need to reload?

Each time I change something in the UI in streamlit (for example close or open side panel) the app reruns so the the width of the component where the PDF is, is recalculated and the PDF displayed with the new width. But the whole redisplaying part is a bit slow, it will be nice if it was smoother