React with bokeh extension

Panel
,
3

Thanks a lot for your response.

I am yet to experiment with it. Let me give it a shot and get back.

Just reverse slider and t in your example.

import panel.widgets as pnw
slider  = pnw.IntSlider(value=10, start=1, end=60)


from panel.reactive import ReactiveHTML

class Test(ReactiveHTML):
    
    _template = "<div id='element'></div>"

    _scripts = {
        'render': """
        setTimeout(() => {
            element.innerHTML = '<div style="width: 500px; height: 500px; background-color: red"></div>'
            console.log(win, props);
        }, 5000)        
        """
    }

t = Test()


pn.Row(t, slider)

image

The issue is, the slider here is absolutely positioned based on the previous component which is not a great way to write CSS I feel. Since this might require some major changes, I was looking for that async thing as I thought that might work good enough for me. Basically what I would like is slider should wait for a component before that, the Test to render completely and should determine the position accordingly.

I assumed that because the following code works perfectly fine:

import panel.widgets as pnw
slider  = pnw.IntSlider(value=10, start=1, end=60)


from panel.reactive import ReactiveHTML

class Test(ReactiveHTML):
    
    _template = "<div id='element'></div>"

    _scripts = {
        'render': """
            element.innerHTML = '<div style="width: 500px; height: 500px; background-color: red"></div>'      
        """
    }

t = Test()


pn.Row(t, slider)

Sure will log an issue. While building my extensions, I have encountered several things which I feel can be documented to easily build extensions.