Bootstrap styling on Panel ReactiveHTML?

Panel
1

Has anyone managed to get dropdowns/popovers to work with bootstrap?

From my research it seems the javascript components can not work because Bootstrap can not access the shadow dom in which Panel inserts the components.

1 Like
2

Hi @rsdenijs

Could you provide a minimum, reproducible example of what you have tried? Something that would be easy for another community member to start exploring solutions with.

3

Hi @rsdenijs

You can get the pop over working something like the below. Its similar to Wrapping Material UI components

import panel as pn
import param
from panel.reactive import ReactiveHTML

pn.extension()


class CustomComponent(ReactiveHTML):
    event = param.Dict()

    _template = """
<div id="container">
<button id="button" onclick="${click_handler}" type="button" class="btn btn-primary" >Primary</button>

<button id="popover_button" onclick="${click_handler}" type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
</div>
"""
    __css__=["https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"]
    __javascript__=["https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"]

    _scripts = {
        "render": """
new bootstrap.Popover(popover_button)
"""
    }
    
    def click_handler(self, event):
        self.event = event.__dict__
        print(self.event)

pn.extension(sizing_mode="stretch_width")
component = CustomComponent(height=100)
pn.Column(component, pn.panel(component.param.event, height=100)).servable()

image