CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-5
user20925063
user20925063

Reputation:

Nav pills dynamic layout issue

I have 2 nav pill buttons that are supposed to change the layout when clicked. Both layouts include the sidebar which doesn't change.

Nav pill 1 changes the layout to:
sidebar | column 1 | column 2

Nav pill 2 changes the layout to:
sidebar | col 1 | column 2 | col 3

Right now what happens is that one column will show up next to the sidebar but the others will be under it and i'm not sure why this happens

#sidebar {
    /* width: 250px; */
    min-height: 100vh;
    max-height: 100vh;
}

#sidebar_sub_header a {
    border-radius: 0;
}

#sidebar_main_content::-webkit-scrollbar {
    width: 0;
    height: 0;

    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow-x: hidden;
}

#sidebar_main_content img {
    /* border: 1px solid white; */
    border: 1px solid rgba(255, 255, 255, 0.1);
    height:100px;
    width:100px;
}

#sidebar_footer {
    align-items: center; 
    text-align: center;
}

#main_body_channels {
    height: 100vh;
}

#main_body_token_requirement_confirmation {
    height: 100vh;
}

#main_body_roles {
    height: 100vh;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">


<div class="container-fluid px-0">
    <div class="row gx-0">
        <nav class="col p-0 d-flex flex-column gap-1 bg-dark text-white" id="sidebar">
            <!-- sidebar header -->
            <div class="bg-dark text-white p-3" style="text-align: center; align-items: center;">
                <h4>
                    sidebar header
                </h4>

                <div class="dropup-center dropdown p-1">
                    <a href="#" class="align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
                        username
                    </a>
                    <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
                        <li><a class="dropdown-item" href="#">Delete User Info</a></li>
                        <li><a class="dropdown-item" href="#">Logout</a></li>
                    </ul>
                </div>
            </div>

            <hr>

            <!-- sidebar sub header -->
            <div class="bg-dark text-white text-center" id="sidebar_sub_header">
                <ul class="nav nav-pills flex-column mb-auto text-white" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a href="#" class="nav-link text-white active" id="server_wide_button" data-bs-toggle="tab" data-bs-target="#server_wide_requirements_pane" type="button" role="tab" aria-controls="server_wide_requirements_pane" aria-selected="true">
                            button 1
                        </a>
                    </li>
        
                    <li class="nav-item" role="presentation">
                        <a href="#" class="nav-link text-white" id="channel_specific_button" data-bs-toggle="tab" data-bs-target="#channel_specific_requirements_pane" type="button" role="tab" aria-controls="channel_specific_requirements_pane" aria-selected="false">
                            button 2
                        </a>
                    </li>
                </ul>
            </div>

            <br>

            <!-- sidebar main content -->
            <div class="flex-grow-1 overflow-auto bg-dark text-white" style="align-items: center;" id="sidebar_main_content">
                <ul class="nav flex-column mb-auto align-items-center">
                        <li class="nav-item">
                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
                                <img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
                            </a>
                        </li>
                
                        <br>

                        <li class="nav-item">
                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
                                <img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
                            </a>
                        </li>
                
                        <br>

                        <li class="nav-item">
                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
                                <img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
                            </a>
                        </li>
                
                        <br>

                        <li class="nav-item">
                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
                                <img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
                            </a>
                        </li>
                
                        <br>

                        <li class="nav-item">
                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
                                <img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
                            </a>
                        </li>
                
                        <br>

                        <li class="nav-item">
                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
                                <img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
                            </a>
                        </li>
                
                        <br>

                        <li class="nav-item">
                            <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="test tooltip">
                                <img src="https://cdn.pixabay.com/photo/2020/02/10/11/12/smiley-4836191_1280.png" class="rounded-circle">
                            </a>
                        </li>
                
                        <br>
                </ul>
            </div>

            <!-- sidebar footer -->
            <div class="p-3 bg-dark text-white" id="sidebar_footer">
                <a href="#" class="btn btn-primary" id="add_bot_button" role="button" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="test tooltip?">
                    test button
                </a>
            </div>
        </nav>






        <!-- TAB 1 -->
        <div class="col tab-pane fade show active" id="server_wide_requirements_pane" role="tabpanel" aria-labelledby="server_wide_button" tabindex="0">
            <div class="text-dark bg-danger" id="main_body_token_requirement_confirmation">
                big main body column
            </div>

            <div class="p-0 d-flex flex-column gap-1 bg-secondary text-dark" id="main_body_roles">
                right sidebar column
            </div>
        </div>

        <!-- TAB 2 -->
        <div class="col tab-pane fade" id="channel_specific_requirements_pane" role="tabpanel" aria-labelledby="channel_specific_button" tabindex="0">
            <div class="p-0 bg-primary text-dark" id="main_body_channels">
                column next to sidebar - same size?
            </div>

            <div class="bg-danger text-dark" id="main_body_token_requirement_confirmation">
                big middle main body column
            </div>

            <div class="p-0 bg-secondary text-dark" id="main_body_roles">
                right sidebar
            </div>
        </div>
    </div>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

using bootstrap 5.3.0 alpha-1

Upvotes: 0

Views: 86

Answers (1)

Cooleronie
Cooleronie

Reputation: 1315

For Bootstrap tabs to work every tab-pane needs to be wrapped in a tab-content container.

For your columns; add the class container-fluid to each tab-pane, then add a row that contains your columns. In my basic example all columns are equal in width, but its easily adjustable.

I am assuming you want a full-page layout, so in CSS do:

#sidebar,
main {
  height: 100vh;
  max-height: 100vh;
}

Then give each container-fluid in <main> the class h-100, which is equal to height: 100%.

Next, give each row the class h-100. Add flex class align-items-stretch to make each column stretch the full available height.

Note: This snippet is build upon my answer of your previous question, not upon the code in your question.

#sidebar,
main {
  height: 100vh;
  max-height: 100vh;
}

.tab-pane .row .col {
  background: tomato;
}

.tab-pane .row .col:nth-child(2) {
  background: lightyellow;
}
<html>

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid px-0">
    <div class="row gx-0">
      <div class="col-4 d-flex flex-column gap-1 bg-dark text-white" id="sidebar">
        <div class="p-2">
          <h5>
            Sidebar header
          </h5>
        </div>
        <nav class="">
          <ul class="nav nav-pills flex-column text-center" role="tablist" aria-orientation="vertical">
            <li class="nav-link rounded-0 active" data-bs-toggle="tab" data-bs-target="#tab-1" type="button" role="tab" aria-controls="tab-1" aria-selected="true">Tab #1 - 2 Columns</li>
            <li class="nav-link rounded-0" data-bs-toggle="tab" data-bs-target="#tab-2" type="button" role="tab" aria-controls="tab-2" aria-selected="false">Tab #2 - 3 Columns</li>
          </ul>
        </nav>
        <div class="flex-grow-1 overflow-auto">
          sidebar scroll
          <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
          end sidebar scroll
        </div>
        <div class="">
          Sidebar footer
        </div>
      </div>
      <main class="col tab-content overflow-auto">
        <div class="container-fluid h-100 tab-pane fade active show" id="tab-1" role="tabpanel" aria-labelledby="tab-1" tabindex="0">
          <div class="row h-100 align-items-stretch">
            <div class="col">
              Col 1
            </div>
            <div class="col">
              Col 2
            </div>
          </div>
        </div>
        <div class="container-fluid h-100 tab-pane fade" id="tab-2" role="tabpanel" aria-labelledby="tab-2" tabindex="0">
          <div class="row h-100 align-items-stretch">
            <div class="col">
              Col 1
            </div>
            <div class="col">
              Col 2
            </div>
            <div class="col">
              Col 3
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Related Questions