Responsive div widget Bokeh

Question

我正在尝试使用div widget和Bokeh server in directory format获得响应性standard template。

我使用引导程序制作了一个模板，其中包含3个区域：

• 左上角div小部件以动态添加文本（日志事件，在发生溢出时可滚动，目标：占据全部可用空间）
• 左下控件（按钮小部件）
• 并且全高是散景图。

控件和绘图按预期运行，//绿色div小部件的行为//：

• 垂直：最初大小合适，但是在添加文本并在控件下方扩展时没有调整大小（无滚动）
• 水平：初始宽度是固定的，但不占用全部可用宽度。溢出时，行为良好（启用滚动）

我尝试使用div小部件的style参数（width:100%，w-100 ..）使用不同的sizing_mode，但没有成功，尝试过不同的CSS技巧。我没有想法，有什么建议吗？

目录结构：

myapp
|
+---main.py
+---templates
    +---index.html

main.py：

from bokeh.plotting import curdoc, figure
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Button, Div
from bokeh.layouts import row

source = ColumnDataSource(dict(xs=[0, 1, 2, 3], ys=[0, 1, 4, 9]))

graph = figure(title="Graphique", name="graph", sizing_mode="stretch_both")
graph.line(x="xs", y="ys", source=source)

logDiv = Div(text="log",
             css_classes=["h-100"],
             style={"overflow": "scroll", "background-color": "green", 'width': '100%', "height": "100%"},
             name="log")

def add_text():
    logDiv.text = "Hohoho" + "<BR>" + logDiv.text
def add_long_text():
    logDiv.text = "HohohoHohohoHohohoHohohoHohohoHohohoHohohoHohohoHohohoHohohoHohohoHohohoHohohoHohohoHohoho" + "<BR>" + logDiv.text

add_text_btn = Button(label="add text")
add_long_text_btn = Button(label="add long text")
add_text_btn.on_click(add_text)
add_long_text_btn.on_click(add_long_text)

controls = row(add_text_btn, add_long_text_btn, name="controls", sizing_mode="stretch_both")

curdoc().add_root(logDiv)
curdoc().add_root(controls)
curdoc().add_root(graph)

index.html：

    {% extends base %}

{% block preamble %}
<!-- Bootstrap -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- full page height -->
<style>
    body, html  {height: 100%;}
</style>
{% endblock %}

<!-- goes in body -->
{% block contents %}
<div class="container-fluid h-100">
    <div class="row h-100">

        <div class="col-3">
            <div class="row h-50">
                {{ embed(roots.log) }}
            </div>
            <div class="row h-50">
                {{ embed(roots.controls) }}
            </div>
        </div>


        <div class="col-9">
            {{ embed(roots.graph) }}
        </div>

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

{% endblock %}

Answer 1

我遵循了一个朋友的建议（封装），找到了一个不错的解决方案：div小部件在附加到文档根目录之前，需要使用row（）或column（）之类的布局进行封装。

下面是解决方案，主要添加是log = row(logDiv, name="log", sizing_mode="stretch_both")

目录结构：

myapp
|
+---main.py
+---templates
    +---index.html

main.py：

from bokeh.plotting import curdoc, figure
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Button, Div
from bokeh.layouts import row

source = ColumnDataSource(dict(xs=[0, 1, 2, 3], ys=[0, 1, 4, 9]))

graph = figure(title="Graphique", name="graph", sizing_mode="stretch_both")
graph.line(x="xs", y="ys", source=source)

logDiv = Div(text="log",
             style={"overflow": "scroll", "background-color": "green", 'width': '100%', "height": "100%"},
             name="logDiv")
log = row(logDiv, name="log", sizing_mode="stretch_both")

def add_text():
    logDiv.text = "Hohoho" + "<BR>" + logDiv.text
def add_long_text():
    logDiv.text = "HohohoHohohoHohohoHohohoHohohoHohohoHohohoHohohoHohohoHohohoHohohoHohohoHohohoHohohoHohoho" + "<BR>" + logDiv.text

add_text_btn = Button(label="add text")
add_long_text_btn = Button(label="add long text")
add_text_btn.on_click(add_text)
add_long_text_btn.on_click(add_long_text)

controls = row(add_text_btn, add_long_text_btn, name="controls", sizing_mode="stretch_both")

curdoc().add_root(log)
curdoc().add_root(controls)
curdoc().add_root(graph)

index.html

{% extends base %}

{% block preamble %}
<!-- Bootstrap -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- full page height -->
<style>
    body, html  {height: 100%;}
</style>
{% endblock %}

<!-- goes in body -->
{% block contents %}
<div class="container-fluid h-100">
    <div class="row h-100">

        <div class="col-3">
            <div class="row h-50">
                {{ embed(roots.log) }}
            </div>
            <div class="row h-50">
                {{ embed(roots.controls) }}
            </div>
        </div>


        <div class="col-9">
            {{ embed(roots.graph) }}
        </div>

    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

{% endblock %}