css - 响应式 div 小部件 Bokeh

Question

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

我使用 bootstrap 制作了一个模板，包含 3 个区域:

• 用于动态添加文本的左上角 div 小部件(记录事件，在溢出时可滚动，目标:占用全部可用空间)
• 左下角控件(按钮小部件)
• 和全高右边的 Bokeh 图。

控件和绘图按预期工作，观察到//green div 小部件//的行为:

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

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

目录结构:

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

主要文件:

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)

索引.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/popper.js@1.16.0/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

我听从了 friend 的建议(封装)并找到了一个优雅的解决方案:div 小部件在附加到文档根目录之前需要使用 row() 或 column() 之类的布局进行封装。

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

目录结构:

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

主要文件:

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/popper.js@1.16.0/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 %}