How to center text and title in float panel

Panel
1

Hi guys,
I am trying to center the title and text in a float panel, but i am not able to make it work. Also it would be great to know if it is possible to make the entire image draggable and if i can somehow prevent the user from resizing the float panel. Thanks in advance and here is my code:

template = pn.template.VanillaTemplate(
    title="FastListTemplate",
    sidebar=[],
)
img_link = 'https://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg'
w1 = pn.widgets.TextInput(name='Text:')
w2 = pn.widgets.FloatSlider(name='Slider')
config = {"headerControls": {"close": "remove", 'minimize': 'remove', 'maximize': 'remove',
                             'smallify': 'remove', 'resizeit': 'remove'},
          'headerToolbar': f'<img src="{img_link}" style="width:300px;height:300px;" alt="Error while loading image">',
          'headerTitle':'<h1 style="text-align:center;">DRAG ME HERE</h1>'
          }
floatpanel = pn.layout.FloatPanel('<p style="text-align: center;">Text_content</p>',contained=False, position='center',
                                  config=config)
drop = pn.Column(pn.widgets.FileInput())
template.main.append(floatpanel)
template.main.append(drop)
template.main.append(img)
template.servable()
template.show()
2

Hi @MaxUhl98

Welcome to the community.

  • The header is not looking centered because its not full width. Its only the width of the text. I worked around it be adding width:300px.
    You can use the resizeit option of the jspanel javascript library to avoid resizing of the FloatPanel.

Works for me :smile:

image
image845×864 97.8 KB

import panel as pn

pn.extension("floatpanel")

CSS = """

"""

img_link = "https://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg"
img = pn.pane.JPG(img_link, width=300, height=300)
w1 = pn.widgets.TextInput(name="Text:")
w2 = pn.widgets.FloatSlider(name="Slider")
config = {
    "headerControls": {
        "close": "remove",
        "minimize": "remove",
        "maximize": "remove",
        "smallify": "remove",
        "resizeit": "remove",
    },
    "headerToolbar": f'<img src="{img_link}" style="width:300px;height:300px;" alt="Error while loading image">',
    "headerTitle": '<h1 style="text-align:center;width:300px">DRAG ME HERE</h1>',
    "resizeit": False,
}
floatpanel = pn.layout.FloatPanel(
    '<p style="text-align: center;">Text_content</p>',
    contained=False,
    position="center",
    config=config,
    styles={"border": "2px solid black"},
    stylesheets=[CSS]
)
drop = pn.Column(pn.widgets.FileInput())

pn.template.VanillaTemplate(
    site="Panel", title="Fixed Size FloatPanel", sidebar=[], main=[floatpanel, drop, img],
).servable()
3

I don’t understand the question to know if it is possible to make the entire image draggable. What do you want to achieve?