[Bug] Replacing content with Nav pills

[BrighterTech]

Version

1.0.7

Reproduction link

https://d323-77-246-50-126.eu.ngrok.io/econet-outlets/account/pages/locations.php

Operating System

local xampp

Device

Macbook

Browser & Version

Firefox Developer 112.0b2 (64-bit)

Steps to reproduce

click to switch between the nav pills

What is expected?

the new content should replace the previous on the same position

What is actually happening?

when I click to switch, the second content will appear below where the other was at

---

Solution

Question 1: How does the Nav pills works in terms of switching content and both content appearing on the same area? currently when I click to switch, the second content will appear below where the other was at! Question 2: How do I make the active content appear on page reload? currently, after the reload I have to click on the other nav pill button for the content to start appearing!

Below in my Nav Pill code:

• My Profile
• Dashboard

Below in my Nav Pill content code:

Messages

Settings

Please help.

Additional comments

[groovemen]

Hello @BrighterTech,

Thank you for using our products, on our side, it's working as expected - please check the screen recording attached below: test.mov.zip We are testing also from a Macbook.

All the best, Stefan

[BrighterTech]

Hi @groovemen

if you look closely, the text "settings" is appearing under the position of the text "messages". It will be ideal for the messages to appear on the same position!

Please take a look at the my code and advise where I need to correct.

  <div class="card card-body blur shadow-blur mb-4">
    <div class="row gx-4">
      <div class="col-md-6 my-sm-auto">
        <ul class="nav nav-pills nav-fill p-1" role="tablist">
          <li class="nav-item">
            <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#message" role="tab" aria-controls="preview" aria-selected="true">
            <i class="ni ni-badge text-sm me-2"></i> My Profile
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#setting" role="tab" aria-controls="code" aria-selected="false">
              <i class="ni ni-laptop text-sm me-2"></i> Dashboard
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="row">
      <div class="col-12">
        <!-- Nav Pill Content -->
        <div class="tab fade" id="message" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <p>Messages</p>
        </div>

        <!-- Nav Pill Content -->
        <div class="tab fade" id="setting" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <p>Settings</p>
        </div>
      </div>
  </div>

[groovemen]

Hello @BrighterTech,

You need to add the position: absolute; property for both tabs, here is the updated code:

<div class="card card-body blur shadow-blur mb-4">
  <div class="row gx-4">
    <div class="col-md-6 my-sm-auto">
      <ul class="nav nav-pills nav-fill p-1" role="tablist">
        <li class="nav-item">
          <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#message" role="tab" aria-controls="preview" aria-selected="true">
          <i class="ni ni-badge text-sm me-2"></i> My Profile
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#setting" role="tab" aria-controls="code" aria-selected="false">
            <i class="ni ni-laptop text-sm me-2"></i> Dashboard
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-12">
    <!-- Nav Pill Content -->
    <div class="tab fade position-absolute show" id="message" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <p>Messages</p>
    </div>

    <!-- Nav Pill Content -->
    <div class="tab fade position-absolute" id="setting" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <p>Settings</p>
    </div>
  </div>
</div>

Regards, Stefan