CODEWITHSUNDEEP
htmlangulardrop-down-menubootstrap-4dropdown
Luciano
Luciano

Reputation: 475

Align dropdown-menu width to parent input box

I've a input box with the dropdown button on rigth (bootstrap 4). When click the button a dropdown-menu is shown. Inside the menù i've an Angular component with a table.

<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>

Print Screen: enter image description here

How can i set the dropdown-menù width equal to the input+button one?

Like this: enter image description here

Environment:

Thanks

Upvotes: 0

Views: 273

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Add position-static on .dropdown div and w-100 class on the dropdown-menu dropdown-menu-right div

<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>

Upvotes: 2

Related Questions