Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] column ignores css class scrollable from version 2.3.0 #11083

Closed
Tracked by #11403
narek-davtyan opened this issue Mar 18, 2021 · 1 comment · Fixed by #11394
Closed
Tracked by #11403

[BUG] column ignores css class scrollable from version 2.3.0 #11083

narek-davtyan opened this issue Mar 18, 2021 · 1 comment · Fixed by #11394

Comments

@narek-davtyan
Copy link

FOLLOW THESE INSTRUCTIONS CAREFULLY

ISSUES THAT DO NOT CONTAIN NECESSARY INFORMATION MAY BE CLOSED, IMMEDIATELY

The issue tracker is NOT the place for general support. For questions and technical assistance, come join the Bokeh Project Discourse.

For defects or deficiencies, please provide ALL OF THE FOLLOWING:

ALL software version info (bokeh, python, notebook, OS, browser, any other relevant packages)

Works fine on bokeh 2.2.2 and breaks on bokeh 2.3.0. Python 3.8.X, MacBook Pro (15-inch, 2018) , Chrome Canary (91.0.4446.0 (Official Build) canary (x86_64)) and Safari (Version 14.0.3 (16610.4.3.1.7))

Description of expected behavior and the observed behavior

Column (with restricted height) of toggle buttons (more than 50 buttons) should show its own scrollbar and hide buttons that do not fit until scrolled. However, what happens in version 2.3.0 is all buttons have their height smashed down so that ALL buttons would fit within the column with restricted height without the real need of the scrollbar (but there is one).
All buttons remain clickable and work as expected. The issue is really with column method.

Complete, minimal, self-contained example code that reproduces the issue

Work tree:
bokeh-vis-bd-x-error/

  • main.py
  • templates/index.html

main.py :

from bokeh.models import Toggle
from bokeh.plotting import curdoc
from bokeh.layouts import column

buttons = []
for country in range(35):
    button = Toggle(label=str(country), button_type="primary", name=str(country), width_policy='fixed', width=290)
    button.active = True
    buttons.append(button)

buttons_col = column(buttons, sizing_mode='scale_height', height=520, width=320, css_classes=['scrollable'], max_height=520, min_width=320)

curdoc().add_root(buttons_col)

templates/index.html :

<!DOCTYPE html>
<html lang="en">
    <head>
      <link rel="shortcut icon" href="/static/favicon/favicon.ico">
      <style>
        div.scrollable {
            overflow: auto;
        }
        .bk-root .bk-btn-primary.bk-active {
            /* color: aquamarine; */
            background-color:hsl(208, 58%, 39%);
        }
      </style>
      <meta charset="utf-8">
      {{ bokeh_css }}
      {{ bokeh_js }}
    </head>
    <body>
      {{ plot_div|indent(8) }}
      {{ plot_script|indent(8) }}
    </body>
</html>

Should be executed with bokeh serve . [if locally] for styles to be applied.

Stack traceback and/or browser JavaScript console output

Screenshot 2021-03-18 at 18 54 49

Screenshots or screencasts of the bug in action

Should be (v 2.2.2)
Screenshot 2021-03-18 at 18 46 52
Is now (v 2.3.0)
Screenshot 2021-03-18 at 18 50 36

@mattpap
Copy link
Contributor

mattpap commented Mar 18, 2021

Possibly a duplicate or related to issue #11057.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants