CODEWITHSUNDEEP
python-3.xbokeh
jsxgd
jsxgd

Reputation: 413

Resizing Bokeh Dropdowns and other Widgets

How can I adjust the size of a dropdown or other widgets with Bokeh in Python?

I have the following dropdowns acting as filters on a graphic:

enter image description here

As you can see, they're all different lengths. They're in a widgetbox like this:

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

which gets dropped into the final layout like this:

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

I have tried 'fixed', 'scale_width', and 'stretch_both' as options for sizing_mode but nothing has change. I just want all the filters to be the same size so there's no jagged edge.

Thanks

EDIT:

Here's what the Select() construction looks like:

#### 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')

Upvotes: 4

Views: 3275

Answers (2)

Shahraan Hussain
Shahraan Hussain

Reputation: 161

Just write down width and mention it's value and you will get the required answer.

Code:

menu = [("Delhi", "3"), ("Mumbai", "4"), ("Chennai", "4"), ("Kochi", "6"), ("Kolkata", "7")]

dropdown = Dropdown(label="LOCATION", button_type="success", menu=menu,width=120)

Upvotes: 2

Seb
Seb

Reputation: 1775

You could switch to a folder app with custom templates

Let's say you have a my_app folder:

in my_app/main.py (it has to be named 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']))

in 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>

in my_app/templates/styles.css :

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

If you run that (bokeh serve --show my_app in the same directory as my_app) you will notice that the first 4 widgets have the specified length of 300 px. But the next widgets have options that are longer than 300px themselves so the widget will extended to fit the largest option in that case. I don't know how to prevent that.

You could shorten the option strings, or make all the widgets as wide as the widest one.

To figure out how to get elements in the document, like the div.bk-widget.bk-layout-fixed part, I just check out elements using the console in the browser.

Upvotes: 0

Related Questions