Dynamic resizing of component/iframe

[Socvest]

I have made a pull request regarding dynamically resizing the width of the component's iframe. Similar implementation was made using this component.

[stefanadelbert]

I would love to see this functionality included in the component.

At the moment I'm having to use streamlit-dimensions to get the width of a container and then use that width to set the width of the pdf viewer. I have had to hack in some hysteresis (only change the width of the pdf viewer if the width of the container was changing by more than a certain amount to avoid continuous reruns). streamlit-dimensions also causes vertical space to be used on the screen.

[lfoppiano]

hi @stefanadelbert we're working on it, but it takes time since this is a side project.
There are failing tests that needs to be addressed before we can merge and release this feature. 😸

[lfoppiano]

I see everybody is quite interested in this feature, I've released a first preliminary version 0.0.21-dev0, please try it and let me know if you have any issue.

[stefanadelbert]

I have just tried 0.0.21-rc0. I am able to provide a percentage like "100%" to the width parameter. Unfortunately this doesn't do what I was hoping for... If I set the width to "50%" then the PDF is rendered in 50% of the width of the container, but if the window is resized, that width is not dynamically updated.

I was hoping for dynamic resizing which would make the PDF fit the width of the container as the width of that container changed, e.g. when a page is resized or the navigation bar on the left is closed/opened.

@lfoppiano Please let me know if you would like more information from me on this.

[Socvest]

@stefanadelbert right, you don't like the horizontal scroll, but rather wish to view the whole doc within lets say 50% of the width of the container as the window size changes? Is that I am getting from what you said?

[lfoppiano]

@Socvest I think what is expected is that the percentage size should change with the window size.

[stefanadelbert]

Hi @Socvest @lfoppiano

The effect that I'm trying to achieve is a side-by-side layout with PDF on the left and a form on the right. I'm using columns for this. I would like the PDF to "fill" the width of the left column, even when the width of the left column changes, e.g. when the window width changes or the side navigation is collapsed.

My idea if that I would put the pdf_viewer element in the left column with width "100%" and then when the window width changes, the column width changes and the pdf_view element width changes to fill the new column width.

Please let me know if this make sense or if you'd like more details. Very happy to discuss further!

🙏 💪