Make dropdown menu use 100% width using Bootstrap 4

Question

So this problem is making me go crazy guys. I created a dropdown menu using Boostrap 4, however when the screen is mobile size I used media query. I want to make my dropdown menu use 100% with when in mobile, and I already tried putting width 100% in some divs or position fixed, but none of that worked. Here is my screen:

The part that is marked in blue is the one that I want to cover the whole screen.

Here is my HTML code:

<div class="notification-container dropdown">
  <button
    class="btn notification-button"
    type="button"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    <i class="fa fa-bell-o"></i>
  </button>
  <div
    class="dropdown-menu dropdown-menu-right notification-container-header"
    aria-labelledby="dropdownMenuButton"
  >
    {{ notifications.length }} notificações
    <div class="notification-container-list-body">
      <ul class="list-group list-group-flush">
        <ng-template
          ngFor
          let-notification
          [ngForOf]="notifications"
          let-i="index"
        >
          <ng-template [ngIf]="notification.imagem">
            <li class="notification-container-list-body-item">
              <a
                class="list-group-item notification-container-list-body-item-image"
                routerLink="{{ notification.link }}"
              >
                <img src="{{ notification.imagem }}" alt="" />
                <div>
                  <div>
                    {{ notification.titulo }}
                  </div>
                  <div>
                    {{ notification.descricao }}
                  </div>
                </div>
              </a>
              <button
                class="btn delete-notification"
                (click)="dropdownPersist($event)"
                (click)="deleteNotification(notification.id)"
              >
                <i class="fa fa-close"></i>
              </button>
            </li>
          </ng-template>

          <ng-template [ngIf]="!notification.imagem">
            <li class="notification-container-list-body-item">
              <a
                class="list-group-item notification-container-list-body-item-noimage"
                href="{{ notification.link }}"
              >
                <div>
                  <div>
                    {{ notification.titulo }}
                  </div>
                  <div>
                    {{ notification.descricao }}
                  </div>
                </div>
              </a>
              <button
                class="btn delete-notification"
                (click)="dropdownPersist($event)"
                (click)="deleteNotification(notification.id)"
              >
                <i class="fa fa-close"></i>
              </button>
            </li>
          </ng-template>
        </ng-template>
      </ul>
    </div>
  </div>
</div>

And here is my SCSS code:

p,
a {
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
}

.notification-button {
  border-color: transparent;
  box-shadow: none;

  i {
    color: #fff;
  }

  &:focus {
    i {
      color: #0ff;
    }
  }
}

.notification-container-header {
  text-align: center;
  font-size: 0.9rem;
  padding-top: 0px;
  padding-bottom: 0px;
  border-bottom: 0px;
  border-radius: 0;
  background-color: #0ff;
  color: #000;
  font-weight: 500;
}

.notification-container-list-body {
  margin-left: 3px;
  margin-right: 3px;

  ul {
    margin-bottom: 3.5px;
    max-height: 250px;
    overflow: auto;
  }
}

.notification-container-list-body-item {
  display: grid;
  background: #000;
  grid-template-columns: 1fr 0.1fr;
  padding: 10px 10px 6px 11px;
  border-bottom: 1px solid #fff;
}

.notification-container-list-body-item-image {
  background: #000;
  display: grid;
  grid-template-columns: 0.2fr 1fr;
  justify-content: center;

  img {
    height: 30px;
    width: 60px;
    padding-right: 9px;
  }

  div {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    color: #fff;

    &:nth-child(1) {
      font-size: 10px;
    }

    &:nth-child(2) {
      font-size: 14px;
    }
  }
}

.notification-container-list-body-item-noimage {
  @extend .notification-container-list-body-item-image;

  grid-template-columns: 1.9fr 0.1fr;

  div {
    width: 261px;
  }
}

.delete-notification {
  padding: 0;
  border-color: transparent;
  box-shadow: none;
  i {
    height: 12px;
    width: 12px;
    color: #646464;
  }

  &:focus {
    i {
      color: #646464;
    }
  }
}

@media (max-width: 576px) {
  .notification-container-header {
    margin-top: 0;
    border: 0;
  }

  .notification-container-list-body-item {
    grid-template-columns: 1.7fr 0.3fr;
    padding: 10px 10px 6px 11px;
  }

  .notification-container-list-body-item-image {
    img {
      height: 30px;
      width: 70px;
      padding-right: 9px;
      align-self: center;
    }

    div {
      color: #fff;

      &:nth-child(1) {
        font-size: 12px;
      }

      &:nth-child(2) {
        font-size: 16px;
      }
    }
  }

  .notification-container-list-body-item-noimage {
    grid-template-columns: 2.3fr 0.3fr;
  }
}

I am also using Angular 9, to make dynamic content. Can some one help?

score 0 · Accepted Answer · answered Jun 23 '20 at 17:19

0

.notification-container-list-body {
  width: 100%; <=====================================================
  margin-left: 3px;
  margin-right: 3px;

  ul {
    margin-bottom: 3.5px;
    max-height: 250px;
    overflow: auto;
  }
}

answered Jun 23 '20 at 17:19

Bryan

14
3

1

While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation. – ysf Jun 24 '20 at 08:18

Make dropdown menu use 100% width using Bootstrap 4

1 Answers1