How to split and align buttons in bootstrap dash plotly navbar? (dbc navbar)

Question

I am facing a problem with styling bootstrap for dash plotly navbar element.

I need a navbar with several buttons. One on the left, 2 on the right. Between those buttons i need some text (which would olso have buttons to switch dashboards, but i haven`t done it yet).

I manged to do that with this code below:

navbar = dbc.NavbarSimple(children=[
        dbc.Button(
            "Меню",
            id="menu_togle",
            n_clicks=0,
            color="secondary",
        ),
        html.H1(children=dashboard_name, style={'textAlign': 'center', 'color':'white'}),
        dbc.Container([
            dbc.Button(
                "Инструкция",
                id="instruction",
                n_clicks=0,
                color="secondary",
                className="me-1"
            ),
            dbc.Button(
                "Изменение параметров дашборда",
                id="open_offcanvas_scrollable",
                n_clicks=0,
                color="secondary",
                className="me-1"
            ),
        ],
        ),
    ],
    color="dark",
    dark=True,
    fluid=True,
    fixed = 'top',
    links_left=True,
    style={'display': 'flex', 'justify-content': 'space-between'}
    )

But i faced the problem with autocreated html — i don't get the structure of that code. Inside navbar are created div inside div inside div and so on. The elements i put inside navbar are basicly inside last div, and i don`t understand how to add style to that elements, cause if i implement any style to navbar, it adds to the navbar html element, but buttons are in the last. You can see it here:

<nav color="dark" class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" style="display: flex; justify-content: space-between;">
  <div class="container-fluid">
    <button n_clicks="0" n_clicks_timestamp="-1" type="button" aria-label="Toggle navigation" class="navbar-toggler collapsed">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse">
      <div class="me-auto navbar-nav">
        <button id="menu_togle" class="btn btn-secondary">Меню</button>
        <h1 style="text-align: center; color: white;">Дашборд по репрезентативности экспедиции</h1>
        <div class="container">
          <button id="instruction" class="me-1 btn btn-secondary">Инструкция</button>
          <button id="open_offcanvas_scrollable" class="me-1 btn btn-secondary">Изменение параметров дашборда</button>
        </div>
      </div>
    </div>
  </div>
</nav>

How do i make them aligned to the full width and splited by "groups"?

Thats what is showing:

BTW sorry for russian language, i hope that doesn`t distract anyone.

I`ve changed the question in case of usability

What value do you need on the other indices which are not in `list_of_indexes`? — AKS, Jul 08 '21 at 14:18

score 0 · Answer 1 · answered Jul 08 '21 at 14:27

df[column] = np.where(df.index.isin(list_of_indexes), True, None)

You can use numpy.where for this.

Example:

In [41]: df = pd.DataFrame(['A', 'B', 'C', 'D'])

In [42]: df
Out[42]: 
   0
0  A
1  B
2  C
3  D

In [43]: df['new'] = np.where(df.index.isin([1, 2]), True, None)

In [44]: df
Out[44]: 
   0   new
0  A  None
1  B  True
2  C  True
3  D  None

score 0 · Answer 2 · answered Jul 08 '21 at 14:28

0

You can use list comprehension with an if else statement in it:

df['list_of_indexes'] = [True if i in list_of_indexes else None for i in df.index]

answered Jul 08 '21 at 14:28

gfsemelas

45
8

thats a loop anyway, in my 'list_of_indexes' are 50k+ values, in df could be around 1m( – vokiatik Jul 08 '21 at 14:32
I tried to make it simple. In case you work with big amounts of data, answer provided by @AKS is better, due to the optimization eficiency in ```numpy``` library. – gfsemelas Jul 08 '21 at 14:54

How to split and align buttons in bootstrap dash plotly navbar? (dbc navbar)

2 Answers2