Блог

Всем привет (пожалуйста, сначала извините меня, потому что я француженка),

У меня есть страница с короткой навигационной панелью (2 варианта) и несколькими разделителями, которые я отображаю или скрываю в зависимости от действий. Однако мои дивы больше не позиционируются в нужном месте, когда я их повторно показываю. Я перепробовал так много возможностей, что заблудился, и это мой первый пост .. так что, пожалуйста, будьте любезны :’)

-Я не могу использовать встроенные изображения, потому что я новичок-

«Домашняя страница» без каких-либо действий

Когда я нажимаю на любой месяц, мой div находится справа, как и должно быть

Когда я нажимаю на навигационную панель (Перегруппировка par mois), мы уже видим, что красный div расположен ниже

Затем, результат, когда я снова нажму на месяц

Подводя итог, когда я нажимаю на панель навигации (синие ссылки), мой div помещается под первым (4-е изображение), вместо того, чтобы оставаться справа, как в начале (перед нажатием на навигационную панель, 2-е изображение)

{Я использую Angular 10, Bootstrap 5.0.2 и Firefox}

Вот выдержка из моего кода:

Часть HTML

 <div class="row">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link" (click)="openListDiv('listMonths')">
        Regroupement par mois
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" (click)="openListDiv('listCities')">
        Regroupement par ville
      </a>
    </li>
  </ul>
</div>


<div id="listMonths" class="row">
  <div id="colListMonth" class="col-md-4">
    <div class="list-group">
      <a class="list-group-item list-group-item-action">
        <b> <span class="pull-right"> Nombre d'images </span></b>
      </a>
      <a *ngFor="let month of months; let i = index" class="list-group-item list-group-item-action" (click)="getCountByDay(month[0])">
        {{month[1]}} {{month[2]}} <span class="badge badge-pill bg-secondary pull-right">{{countByMonth[i]}}</span>
      </a>
    </div>
  </div>

  <div id="colListDates" class="col-md-4">
    <div id="listDates" class="list-group">
      <a class="list-group-item list-group-item-action">
        <b>Dates des images <span class="pull-right"> Nombre d'images </span></b>
      </a>
      <a *ngFor="let item of countByDay | keyvalue | reverse" class="list-group-item list-group-item-action">
        {{item.key | date: 'dd/MM/yyyy'}} <span class="badge badge-pill bg-secondary pull-right">{{item.value}}</span>
      </a>
    </div>
  </div>
</div>
 

Часть машинописного текста

   //Open the monthTracking div
  public openListDiv(id): void{
    let listMonths = document.getElementById("listMonths");
    let listCities = document.getElementById("listCities");
    if(id === "listMonths"){
      listMonths.style.display = "block";
      listCities.style.display = "none";
    }
    else{
      listCities.style.display = "block";
      listMonths.style.display = "none";
    }
  }
 

Часть SCSS

 #listCities, #listDates, #listPms{
  display: none;
}

#listMonths, #listDates, #listCities, #listPms{
  width: 100%;
}

#colListDates{
  border: solid 1px red;
}

#colListMonth{
  border: solid 1px lawngreen;
}