Bootstrap 4 : Obtenir une liste déroulante pleine largeur dans le conteneur du menu principal

Question

J'aimerais que le menu déroulant s'affiche à partir de la position initiale pour tous les menus et qu'il conserve une largeur de 600px.

Ainsi, même si j'essaie d'ouvrir la liste déroulante de disons Main Menu 2 o Main Menu 3 o Main Menu 4 la liste déroulante doit commencer à partir de Main Menu 1 position. Voici un écran que j'ai réalisé pour mieux comprendre.

PS : Ceci est sur ng-Bootstrap 4 et donc quelques codes liés à Angular. Voici également le code HTML généré.

<ul class="nav justify-content-end">
  <li class="nav-item">
    <div class="d-inline-block dropdown" ngbdropdown="">
      <button aria-haspopup="true" class="nav-link btn btn-link text-uppercase dropdown-toggle" id="dropdownBasic0" ngbdropdowntoggle="" aria-expanded="false">Main Menu 1</button>
      <div aria-labelledby="dropdownBasic0" ngbdropdownmenu="" class="dropdown-menu" x-placement="bottom-left">
        <div class="" ngbdropdownitem="">
          <div class="row">
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 1</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu A</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu B</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu C</a>
            </div>
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 2</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu D</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu E</a>
            </div>
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 3</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu F</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu G</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu H</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="nav-item">
    <div class="d-inline-block dropdown" ngbdropdown="">
      <button aria-haspopup="true" class="nav-link btn btn-link text-uppercase dropdown-toggle" id="dropdownBasic1" ngbdropdowntoggle="" aria-expanded="false">Main Menu 2</button>
      <div aria-labelledby="dropdownBasic1" ngbdropdownmenu="" class="dropdown-menu" x-placement="bottom-left">
        <div class="" ngbdropdownitem="">
          <div class="row">
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 1</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu A</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu B</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu C</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu D</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu E</a>
            </div>
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 2</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu F</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu G</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu H</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu I</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu J</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu K</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu L</a>
            </div>
            <div class="col-lg-4">
              <h2 _ngcontent-c4="">Submenu 3</h2>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu M</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu N</a>
              <a routerlink="/" ng-reflect-router-link="/" href="stackoverflow.com/">Menu O</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

Il s'agit du code Angular :

<ul class="nav justify-content-end">
  <li class="nav-item">
    <div ngbDropdown class="d-inline-block">
      <button class="nav-link" id="dropdownBasic0"
              ngbDropdownToggle>Main Menu 1</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic0">
        <div class="" ngbDropdownItem>
          <div class="row">
            <div class="col-lg-4">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
            </div>
            <div class="col-lg-4">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
            </div>
            <div class="col-lg-4">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="nav-item">
    <div ngbDropdown class="d-inline-block">
      <button class="nav-link" id="dropdownBasic1"
              ngbDropdownToggle>Main Menu 2</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <div class="" ngbDropdownItem>
          <div class="row">
            <div class="col-lg-12">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
              <a routerLink="/">Sub Menu 4</a>
              <a routerLink="/">Sub Menu 5</a>
              <a routerLink="/">Sub Menu 6</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="nav-item">
    <div ngbDropdown class="d-inline-block">
      <button class="nav-link" id="dropdownBasic2"
              ngbDropdownToggle>Main Menu 3</button>
      <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
        <div class="" ngbDropdownItem>
          <div class="row">
            <div class="col-lg-6">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
            </div>
            <div class="col-lg-6">
              <a routerLink="/">Sub Menu 1</a>
              <a routerLink="/">Sub Menu 2</a>
              <a routerLink="/">Sub Menu 3</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>

Answer 1

Puisque vous utilisez ngbDropdown - j'ai pensé à répondre à la question en Angular ;

• Au lieu de fixer la largeur à une valeur arbitraire de 600px, j'utilise les classes BS4 afin d'obtenir une solution réactive dans laquelle 50 % de la largeur est consacrée au logo et l'autre moitié aux boutons de navigation.
• Puisque nous avons dû retirer le contenu du menu déroulant de la position par défaut (qui est maintenant commentée dans le SB) juste sous le bouton de basculement, nous avons dû gérer l'effet de basculement nous-mêmes ;
• Nous avons également procédé à un peu de stylisme pour obtenir l'effet que nous souhaitions
• Vous pouvez voir un Démonstration de fonctionnement ici

pertinent HTML code :

<div class="row">
    <div class="col-6">
        LOGO AREA
    </div>

    <div class="col-3 ">
        <div ngbDropdown class="fullWidth">
            <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle (click)="toggleShow1()">dropdown1</button>
    </div>
  </div>

  <div class="col-3 ">
    <div ngbDropdown  class="fullWidth">
      <button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle (click)="toggleShow2()">dropdown2</button>
    </div>
  </div>
  </div>
  <div class='row'>
    <div class='col-6'>
    </div>
    <div class='col-6'>
      <div class='dropdown-menu show' *ngIf="show1" >
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
      <div class='dropdown-menu show' *ngIf="show2">
        <button ngbDropdownItem>Action - 2</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
      </div>
    </div>
</div>

pertinent TS code :

import { Component } from '@angular/core';

@Component({
  selector: 'ngbd-dropdown-basic',
  templateUrl: './dropdown-basic.html',
  styles: [`
  .fullWidth .btn {width:100%;}
  .dropdown-menu.show{ position: initial; width: inherit;}
  `]
})
export class NgbdDropdownBasic {
  show1: boolean = false;
  show2: boolean = false;

  toggleShow1() {
    if (this.show1) { this.show1 = false; }
    else {
      this.show1 = true;
      (this.show2) ? this.show2 = false : '';
    }
  }

  toggleShow2() {
    if (this.show2) { this.show2 = false }
    else {
      this.show2 = true;
      (this.show1) ? this.show1 = false : '';
    }
  }

}