时间戳

首页 > 解决方案 > 将下拉菜单宽度与父输入框对齐

html - 将下拉菜单宽度与父输入框对齐

问题描述

我有一个带有下拉按钮的输入框（引导程序 4）。单击按钮时，将显示一个下拉菜单。在菜单里面，我有一个带有表格的 Angular 组件。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<div *ngIf="isAdmin" class="form-row">
  <div class="form-group col">
    <label for="userSite">Site</label>
    <div class="input-group">
      <input type="text" id="userSite" name="userSite" class="form-control form-control-sm" readonly [ngModel]="userFilter.siteDescription || ''" #userSite="ngModel"
        aria-label="Select the Site for the filter">
      <div class="input-group-btn">
        <div class="dropdown">
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Select
          </button>
          <div class="dropdown-menu dropdown-menu-right">
            <sites-list-management [showView]="false" [(user)]="userFilter"></sites-list-management>
            <div class="dropdown-divider"></div>
            <div class="dropdown-item text-center" style="background-color: rgba(0, 0, 0, 0.05); cursor: pointer;" (click)="onSiteSelect(-1);">Remove selection</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

打印屏幕： 在此处输入图像描述

如何将下拉菜单的宽度设置为等于输入+按钮之一？

像这样： 在此处输入图像描述

环境：

谢谢

标签： htmlangulardrop-down-menubootstrap-4dropdown

解决方案

position-static在div 上添加 div.dropdown和w-100classdropdown-menu dropdown-menu-right

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div *ngIf="isAdmin" class="form-row">
  <div class="form-group col">
    <label for="userSite">Site</label>
    <div class="input-group">
      <input type="text" id="userSite" name="userSite" class="form-control form-control-sm" readonly [ngModel]="userFilter.siteDescription || ''" #userSite="ngModel" aria-label="Select the Site for the filter">
      <div class="input-group-btn">
        <div class="dropdown position-static">
          <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Select
      </button>
          <div class="dropdown-menu dropdown-menu-right w-100">
            <sites-list-management [showView]="false" [(user)]="userFilter"></sites-list-management>
            <div class="dropdown-divider"></div>
            <div class="dropdown-item text-center" style="background-color: rgba(0, 0, 0, 0.05); cursor: pointer;" (click)="onSiteSelect(-1);">Remove selection</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

推荐阅读