Css 响应div小部件Bokeh

我正在试着用它来获得一个反应迅速的结果

我使用bootstrap制作了一个模板，有3个区域：

• 左上角的div小部件，用于动态添加文本（日志事件，溢出时可滚动，目标：占用全部可用空间）
• 左下角控件（按钮小部件）
• 全高右图是一幅博克图

控件和绘图按预期工作，观察到//green div widget//：

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

我用div小部件的

样式

参数（

宽度：100%

，

w-100

）尝试了不同的css技巧，但没有成功，使用了不同的

大小调整模式

。 我没有主意了，有什么建议吗

目录结构：

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

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)

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)

来自bokeh.doc的

，图
从bokeh.models导入ColumnDataSource
从bokeh.models.widgets导入按钮，Div
从bokeh.layouts导入行
source=ColumnDataSource（dict（xs=[0,1,2,3]，ys=[0,1,4,9]））
图=图（title=“Graphique”，name=“graph”，size\u mode=“拉伸”
图线（x=“xs”，y=“ys”，source=source）
logDiv=Div（text=“log”，
css_类=[“h-100”]，
样式={“溢出”：“滚动”，“背景色”：“绿色”，“宽度”：“100%”，“高度”：“100%”，
name=“log”）
def add_text（）：
logDiv.text=“Hohoho”+”
“+logDiv.text
def add_long_text（）：
logDiv.text=“HohoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHo
添加文本按钮（label=“添加文本”）
添加长文本按钮（label=“添加长文本”）
添加文本。点击（添加文本）
添加长文本。点击（添加长文本）
控件=行（添加长文本、添加长文本、名称=“控件”、大小调整方式（“拉伸”和“拉伸”）
curdoc（）.add_root（logDiv）
curdoc（）.add_root（控件）
curdoc（）.add_root（图形）

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 %}

{%extensedbase%}
{%block preamble%}
正文，html{高度：100%；}
{%endblock%}
{%block contents%}
{{embed（root.log）}
{{embed（root.controls）}
{{embed（root.graph）}
{%endblock%}

我按照朋友的建议（封装）找到了一个优雅的解决方案：在将div小部件附加到文档根之前，需要使用类似row（）或column（）的布局对其进行封装

下面是解决方案，主要添加内容是

log=row（logDiv，name=“log”，size\u mode=“stretch\u both”）

目录结构：

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)

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)

来自bokeh.doc的

，图
从bokeh.models导入ColumnDataSource
从bokeh.models.widgets导入按钮，Div
从bokeh.layouts导入行
source=ColumnDataSource（dict（xs=[0,1,2,3]，ys=[0,1,4,9]））
图=图（title=“Graphique”，name=“graph”，size\u mode=“拉伸”
图线（x=“xs”，y=“ys”，source=source）
logDiv=Div（text=“log”，
样式={“溢出”：“滚动”，“背景色”：“绿色”，“宽度”：“100%”，“高度”：“100%”，
name=“logDiv”）
log=行（logDiv，name=“log”，size\u mode=“拉伸两个”）
def add_text（）：
logDiv.text=“Hohoho”+”
“+logDiv.text
def add_long_text（）：
logDiv.text=“HohoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHoHo
添加文本按钮（label=“添加文本”）
添加长文本按钮（label=“添加长文本”）
添加文本。点击（添加文本）
添加长文本。点击（添加长文本）
控件=行（添加长文本、添加长文本、名称=“控件”、大小调整方式（“拉伸”和“拉伸”）
curdoc（）.添加根目录（日志）
curdoc（）.add_root（控件）
curdoc（）.add_root（图形）

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 %}

{%extensedbase%}
{%block preamble%}
正文，html{高度：100%；}
{%endblock%}
{%block contents%}
{{embed（root.log）}
{{embed（root.controls）}
{{embed（root.graph）}
{%endblock%}