Black Lives Matter. Please consider donating to Black Girls Code today.

List of Labels with slider

Dash
#1

I am currently having a list of column names, and sliders to the right of it.
I want the column names as a scroll-able list of Labels with the sliders below each Label.

I have tried using,
‘overflow-y’:‘scroll’, to make the label lists scroll-able, Its not helping :frowning:

and the below snippet to bring sliders after every labels.

def create_col_names(list_of_cols, min_val, max_val):
      return html.Div([html.Div([html.H6(col) for col in list_of_cols], style={'height':'10%',
                                                                         'textAlign': 'left',
                                                                         'font-style': 'italic',
                                                                         'font-family': 'serif',
                                                                         'fontSize': 4,
                                                                         'color': colors['feat_text'],
                                                                         'overflow-y':'scroll',
                                                                         'word-wrap':'break-word'}),

                       html.Div([dcc.Slider() for i in range(len(list_of_cols))], style={'width':'20%',
                                                                                   'height':'10%',
                                                                                   'marginBottom': '40%',
                                                                                   'marginLeft':'50%'})
                ], style={'columnCount':2})

I believe in the return statement, I need some magic.
Please advise, any help is appreciated. Thanks in advance :slight_smile:

#2

I was able to solve the scroll issue by fixing the Div size for H6 tags. But the slider Issue still persists.