cssaccordionplotly-dashbootstrap-5bootstrap-accordion

BootStrap: Right aligning nested accordion

I have a nested accordion that looks like:

enter image description here

But I would like to right-align them so that all the collapse arrows are aligned. I am using Plotly Dash so my code looks like:

d = {'1': {'1.1': {'1.1.1': {}}, '1.2': {'1.2.1': {}}}, 
  '2': {'2.1': {'2.1.1': {}}, '2.2': {'2.2.2': {}}}}

def generate_accordion(input_dictionary):
    output = dbc.Accordion([], start_collapsed=True, always_open=True, flush=True)
    for key, subdict in input_dictionary.items():
        output.children.append(dbc.AccordionItem(generate_accordion(subdict), title=key, style={'display': 'block', 'left': '20px', 'text-align': 'center'}))
    return output
Accordion_Nest = generate_accordion(d)
print(Accordion_Nest)

app = Dash(__name__,
            external_stylesheets=[dbc.themes.BOOTSTRAP, 'https://codepen.io/chriddyp/pen/bWLwgP.css'],
            prevent_initial_callbacks=True
            )

app.layout = html.Div(
    [
        Accordion_Nest,
    ]
)
Solution

  • I hope this helps you out. I am not familiar with plotly dash but using Bootstrap 5 I was able to replicate your nested divs and set the padding-right: 0 for div.accordion-body which achieved aligning all the collapse arrows vertically.

    Additionally, you could probably set each accordion-header and accordion-body divs to be w-100 if that is also something you are looking for.

    I have a code snippet with my results below. Best of luck!

    div.accordion-body{
  padding-right: 0 !important;
}
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="accordion" id="accordionPanelsStayOpenExample">
    <div class="accordion-item">
      <h2 class="accordion-header" id="panelsStayOpen-headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
          Accordion Item #1
        </button>
      </h2>
      <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
        <div class="accordion-body">

            Accordion Item #1 Body

            <div class="accordion-item">
                <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
                  <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
                    Accordion Item #2
                  </button>
                </h2>
                <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
                  <div class="accordion-body">
                    Accordion Item #2 Body

                    <div class="accordion-item">
                        <h2 class="accordion-header" id="panelsStayOpen-headingThree">
                          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
                            Accordion Item #3
                          </button>
                        </h2>
                        <div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
                          <div class="accordion-body">

                            Accordion Item #3 Body

                          </div>
                        </div>
                      </div>

                  </div>
                </div>
              </div>
             

        </div>
      </div>
    </div>
    
  </div>