Question

如何使用Python中的Bokeh调整下拉列表或其他小部件的大小？

我有以下下拉列表作为图形上的过滤器：

如你所见，它们的长度各不相同。他们在这样的小部件框中：

widgets = widgetbox([school_selector,
                degree_selector,
                student_selector,
                began_exam_selector,
                finished_exam_selector],
                sizing_mode='fixed')

会被放入最终版面，如下所示：

dashboard_layout = column(widgets, column(time_v_note, exam_data_table))
curdoc().add_root(dashboard_layout)

我已尝试'fixed'，'scale_width'和'stretch_both'作为sizing_mode的选项，但没有任何变化。我只是希望所有滤镜都具有相同的尺寸，因此没有锯齿状的边缘。

由于

编辑：

这是Select（）结构的样子：

#### School Selector
## Selection Options
school_select_opts = ['All'] + list(exam_df['School ID - School Name'].unique())

## Selector Build
school_selector = Select(title='1) Choose a School:',
                         options=school_select_opts,
                         value='All')

#### Degree Selector
## Selection Options
degree_select_opts = ['All'] + list(exam_df['Degree'].unique())

## Selector Build
degree_selector = Select(title='2) Choose a Degree:',
                         options=degree_select_opts,
                         value='All')

#### Exam Selector
## Selection Options
exam_select_opts = ['All'] + list(exam_df['Exam ID - Exam Name'].unique())

## Selector Build
exam_selector = Select(title='3) Choose an Exam:',
                       options=exam_select_opts,
                       value='All')

#### Student Selector
## Selection Options
student_select_opts = ['All'] + list(exam_df['Applicant ID - Full Name'].unique())

## Selector Build
student_selector = Select(title='4) Choose a Student:',
                         options=student_select_opts,
                         value='All')

#### Begin Exam Selector
## Selection Options
begin_exam_opts = ['All', 'Yes', 'No']

## Selector Build
began_exam_selector = Select(title='Began Exam?',
                             options=begin_exam_opts,
                             value='All')

#### Finished Exam Selector
## Selection Options
finished_exam_opts = ['All', 'Yes', 'No']

## Selector Build
finished_exam_selector = Select(title='Finished Exam?',
                                options=finished_exam_opts,
                                value='All')

Answer 1

您可以切换到包含自定义模板的文件夹应用

假设您有一个my_app文件夹：

my_app/main.py中的

（必须命名为main.py）：

from bokeh.io import curdoc
from bokeh.layouts import widgetbox
from bokeh.models import Select

curdoc().add_root(widgetbox([Select(title=str(i)+') Select:',options=['']+['a'*i*10],css_classes=['my_inputs']) for i in range(10)],css_classes=['my_widgetbox']))

my_app/templates/index.html中的

：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    {{ bokeh_css }}
    {{ bokeh_js }}
  </head>
  <body>
    <style type="text/css">
      {% include 'styles.css' %}
    </style>
    {{ plot_div|indent(8) }}
    {{ plot_script|indent(8) }}
  </body>
</html>

my_app/templates/styles.css中的

：

.my_widgetbox div.bk-widget.bk-layout-fixed.my_inputs {
    width:300px;
}

如果你运行（bokeh serve --show my_app与my_app在同一目录中），你会注意到前4个小部件的指定长度为300 px。但是下一个小部件的选项长度超过300px，因此小部件将扩展到适合该情况下的最大选项。我不知道如何防止这种情况。

您可以缩短选项字符串，或使所有小部件与最宽的小部件一样宽。

为了弄清楚如何获取文档中的元素，比如div.bk-widget.bk-layout-fixed部分，我只是在浏览器中使用控制台检查元素。

Answer 2

只需写下宽度并提及它的值，您就会得到所需的答案。

代码：

.sidenav__content--height{
  min-height: 100vh;
}

调整散景下拉列表和其他小部件的大小

2 个答案: