HTML file is not displayed correctly in main section of FastListTemplate

Panel
1

Hello all!

I am very new to panel and I plan to try it for a research project I am working on.
I have the following situation:

  • Within a FastListTemplate I have a select element in the sidebar and in main a report
  • The report is a separate HTML file which for development purposes is currently on my local machine
  • When selecting one option from the sidebar, in main it will read the HTML file associated and will render it.

I have two issues at the moment:

  • The main area dedicated to the HTML file is small, instead of the full available area
  • The images within the HTML file are not displayed (while in development they are in my project folder, locally)

Here is my code:

import panel as pn


def create_report(report: str):
    report = open(f"{report.replace('Report ', 'index')}.html").read()
    return pn.pane.HTML(report)


select_report = pn.widgets.Select(name="Select report", options=["Report 1", "Report 2", "Report 3"])
html_report = pn.bind(create_report, report=select_report)

template = pn.template.FastListTemplate(
    site="Demo reporting",
    title="",
    sidebar=[select_report],
    main=[html_report]
)

template.servable()

Here is the “template” for my local HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Report 1</title>
</head>
<body>
    <div>This is a very very very very long title for report 1</div>
    <hr>
    <img src="report1_image1.jpeg">
</body>
</html>

Here is the project structure:

panel
|- board.py
|- index1.html
|- index2.html
|- index3.html
|- report1_image1.jpeg
|- report2_image1.jpeg
|- report3_image1.jpeg

From my terminal I use panel serve board.py --autoreloa to start.

Here is how it looks like in Chrome:

image
image1432Ă—264 13.6 KB

As it can be seen, the text’s width is limited to a small portion of main (report 1 is displayed on a second row) and the image is not loaded (I get 404: Not Found when inspecting it).

Any advice is highly appreciated.

Thank you in advance!

Regards,
Sorin

2

The two issues you have can properly be fixed by

  1. Add pn.extension(sizing_mode="stretch_width") to the top of you script
  2. Add the current folder as a static dir. See here for how to do it.
3

Thank you @Hoxbro for your suggestions.
One thing to add, is that for the pictures to be displayed, it seems you need an actual folder - the current folder doesn’t seem to be enough. Anyway, this is something I can work with, so marking this as solved.
Probably I will ask more questions in dedicated posts :slight_smile:.
Thank you!

1 Like