Sidebar in dash?

Dash Python
1

Hey all,

I’m really new to Dash, but it’s been pretty easy to get up and running!

I work in a team with a lot of R developers who use Shiny for visualization. So, I’m trying to make my Dash app look as much like theirs as possible since they’re all using the same template.

The thing I’m struggling with is trying to find a way to utilize a sidebar to hold several parameters for my model. Is there any easy way to create a sidebar in a Dash app?

4 Likes
3

@roman, A kind of off-topic (sorry, I’m new here and can’t PM):
As long as I can see, you have a few filters in your sidebar, which are applied simultaneously. Few topics down I am trying to make same thing: filter table (DataFrame) by two independent controls.

Could you please share an advice on how to manage it?

4

YES!! Exactly like that. How did you get that to work?

5

Somewhere on that forum i found how to add css to dash apps. So i added Bootstrap and rewrite my layout using bootstrap classes like:
layout=html.Div(className=“row”,children=[
html.Div(className=“col-lg-2 left-panel”,children=[control_elements_of_app]),
html.Div(className=“col-lg-10”,children=[
some another bootstrap rows with col-lg-12 or col-lg-6 div with graphs
])
])

I am not pro web-dev so i get some hours on w3school to make panel unscrollable.

2 Likes
6

Hi! Its really strange behavior because when we fire 1 control table must be recalculated with values of all controls that it is signed to . Can you share your code ?

7

Thanks for reply! I posted code in my original topic.

If I understand you correctly, you’re talking about filtering “front-end” table (good option, I’ll look into this). Instead of this, I intent to filter source DataFrame - because I don’t want to transfer all the data to the client, it might be huge. Hope, there’s a good solution.

8

Ahhhh, I see now! That’s perfect. Thank you so much for responding!

9

@roman could you share your code? I’m trying to build a page with a header and a sidebar and I your image looks perfect. I’m struggling with html/css and I’m having problems.

10

sure! this side-bar isn’t perfect. it’s not adapted to screen-reseizing so it is some things to work on =)
https://yadi.sk/d/WZURkNcP3VawdW

index.py contains header nav-bar
app2.py is that file with sidebar from screenshot
custom.css contains bootstrap + spinning wheel on app-updating from that forum + some settings for sidebar.

2 Likes
11

Thanks a lot! It is enough to start and it will save me time.

12

Hi @roman, could you update your link please? It does not work any more.

Thank you in advance.

13

Hi! Link updated. have no i idea how to get 20 letters to post this but i try =)

14

roman’s link seems to be broken. Could someone post the full code for the sidebar example please?

15

Check this : Simple sidebar - dbc examples

1 Like