Блог

Главная - Вопросы по программированию - NgbDropdown обрезается по столбцу

NgbDropdown обрезается по столбцу

#javascript #html #css #angular #ng-bootstrap

#javascript #HTML #css #угловой #ng-bootstrap

Вопрос:

В моем приложении у меня есть 2 столбца, левая сторона — это элементы управления, а правая сторона — настройки этих элементов управления, один из параметров устанавливается с помощью NgbDropdown. Итак, у меня есть эта проблема с моим NgbDropdown, где он обрезается столбцом рядом с ним следующим образом:введите описание изображения здесь

Для позиции установлено значение absolute, а также была предпринята попытка установить z-индекс выше левого столбца, что не сработало. Я также попробовал решение container=»body», которое на самом деле выполняет эту работу, но затем выпадающий список не привязывается к inputfield (всплывает при запуске прокрутки). Я ищу либо решение с атрибутом container=»body», либо CSS и / или JS, чтобы перекрывать столбец или запускать overflow-x, когда столбец настроек становится слишком узким

текущий css

 .dropdown-menu{
    max-width: 290px!important;
    max-height: 200px!important;
    overflow: auto;
    top: 7px!important;
    position: absolute!important;
    left:0;
    z-index: 1000!important;
}

текущий html

 <div class="form-group margin">
          <label for="validator">Validator <i class="mdi mdi-information" placement="bottom" container="body"></i></label>
          <div class="input-group">
            <input class="form-control bg text-white" name="validator" id="validator" [(ngModel)]="selected[0].validator">
            <div class="input-group-append">
              <span class="input-group-text">
                <div class="btn-group">
                  <div ngbDropdown>
                    <a class="dropdown-toggle" ngbDropdownToggle></a>
                    <div ngbDropdownMenu class="bg">
                      <div ngbDropdownItem *ngFor="let validator of validators; let i = index">
                        <a (click)="addValidator(validator.expression)">
                          <p></p>
                          <p></p>
                        </a>
                        <div></div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
            </div>
          </div>
        </div>
Метки: