BsDropdownModule viewport problem.

[luizssouza]

I am experiencing issues when using BsDropdown. When it expands near the edges of the browser, it ends up 'escaping' the viewport. Is there a parameter to make this adjustment automatically, or should this adjustment be done manually in the DOM?

        <div class="col-md-1">
          <div class="btn-group btn-group-sm" dropdown [autoClose]="true" [insideClick]="true" [isAnimated]="true" container="body" matTooltip="Filters">
            <button id="button-nested" dropdownToggle type="button" class="btn btn-primary dropdown-toggle" aria-controls="dropdown-nested">
              <i class="fas fa-filter"></i> <span class="caret"></span>
            </button>
            <ul id="dropdown-nested" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-nested">
              <li role="menuitem" dropdown [autoClose]="true" [insideClick]="true" [isAnimated]="true" [placement]="'right'" container="body">
                <a dropdownToggle class="dropdown-item dropdown-toggle" (click)="false">Order date<span class="caret"></span></a>
                <ul *dropdownMenu class="dropdown-menu" role="menu">
                  <li role="menuitem"><a class="dropdown-item" fragment="nested-dropdowns">Sort ascending</a></li>
                  <li role="menuitem"><a class="dropdown-item" fragment="nested-dropdowns">Sort descending</a></li>
                  <li role="menuitem"><a class="dropdown-item" fragment="nested-dropdowns">Between</a></li>
                </ul>
              </li>
              <li role="menuitem" dropdown [autoClose]="true" [insideClick]="true" [isAnimated]="true" [placement]="'right'" container="body">
                <a dropdownToggle class="dropdown-item dropdown-toggle" (click)="false">Expiration date<span class="caret"></span></a>
                <ul *dropdownMenu class="dropdown-menu" role="menu">
                  <li role="menuitem"><a class="dropdown-item" fragment="nested-dropdowns">Sort ascending</a></li>
                  <li role="menuitem"><a class="dropdown-item" fragment="nested-dropdowns">Sort descending</a></li>
                  <li role="menuitem"><a class="dropdown-item" fragment="nested-dropdowns">Between</a></li>
                </ul>
              </li>
              <li class="divider dropdown-divider"></li>
              <li role="menuitem"><a class="dropdown-item">Clear filters</a>
              </li>
            </ul>
          </div>
        </div>