Getting Bootstrap components working is currently clunky with python API

Dash Python
1

I’ve hit a couple stumbling blocks building a dash app with Bootstrap styling.

I’ve wanted to use certain interactive elements (specifically collapsible and nav-bar) which typically require small bits of java script to enable the interactive behavior. For example:

Something like:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Would need a javascript piece like:

$(".nav a").on("click", function(){
    $(".nav").find(".active").removeClass("active");
    $(this).addClass("active");
});

I’ve been able to hack together ways of supporting this behavior in my python code, but they tend to be a lot clunkier then just including the JS snippet. I’ve tried hosting a static JS file (How do I use Dash to add local css?), but since the JS runs before dash renders the page the callbacks don’t get registered without additional hacking.

It seems like the html.Script component might fix this, but that currently has issues as well https://github.com/plotly/dash/issues/93 . Anyone figure out a good way to support these sorts of components? Otherwise it seems like fixing the Script component would make this a much easier to solve issue.

2

Ultimately, I think that the best solution for this will be for someone to write a formal Dash-Bootstrap component library that uses the React-Bootstrap library and the Dash plugin system (https://plot.ly/dash/plugins).

3 Likes
3

Here is an example of an app that integrated parts of bootstrap: Gene expression example (Show and Tell)

4

A concern with the use of Bootstrap components that make of use javascript is that many of them (I’m pretty sure) use jQuery to manipulate the DOM. This isn’t going to play well with React as they will be both trying to control the DOM. So a Bootstrap Dash component would to manage this, by telling React’s to not update parts of the DOM. I’ve seen this done before though, here, for example.

Of course it’s fine to just use Bootstrap’s CSS, such as for using the grid layout, which is something I do a lot with Dash.

1 Like