Question 316846 in CSS Question posted in
Some basic documentation can be found here.

Css – How to avoid overlap between 2 dropdown menu?

I have the following code where there are 2 checkbox below one another.
If checkbox is clicked then dropdown menu appears.

The problem is the above dropdown options overlaps below dropdown when menu is clicked. How can I resolve this? What changes can I do in order so that the UI looks good and aligned and there is no overlap?

enter image description here

Below is the code

            <div class="flex items-center w-full">
                        <div id="data" fxLayout="row">
                            <mat-checkbox formControlName="allowData"
                                >Allowmat-checkbox
                            >
                        </div>
                        <div
                            *ngIf="form2.value.extendedProperties.allowData"
                            fxLayout="row"
                            fxLayoutAlign="start center"
                            class="full-width"
                            fxLayoutGap="16px"
                        >
                            <mat-form-field fxFlex="30">
                                <mat-select placeholder="Fee" formControlName="nom">
                                    <mat-option
                                        *ngFor="let chargeType of nom.values"
                                        [value]="chargeType"
                                        >{{ nom.descriptions[chargeType] }}</mat-option
                                    >
                                </mat-select>
                            </mat-form-field>

                            <mat-form-field
                                fxFlex="40"
                                *ngIf="
                                    form2.value.extendedProperties.nom ==
                                    nom.Charge
                                "
                            >
                                <mat-select placeholder="Select Nomination Fee" formControlName="ChargeId">
                                    <mat-option [value]="0">None</mat-option>
                                    <mat-option *ngFor="let fee of fees" [value]="fee.id">
                                        {{ fee.name }}
                                    </mat-option>
                                </mat-select>
                            </mat-form-field>

                            <mat-checkbox
                                fxFlex="40"
                                *ngIf="
                                    form2.value.extendedProperties.nom ==
                                    nom.classEntryFee
                                "
                                formControlName="ref"
                            >
                                Refund
                            </mat-checkbox>
                        </div>
                    </div>
                    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="16px" class="full-width">
                        <mat-checkbox
                            formControlName="allowSessionData"
                            (change)="allowModify($event)"
                        >
                            Allow
                        </mat-checkbox>

                        <mat-form-field *ngIf="form2.value.extendedProperties.allowSessionData" fxFlex="30">
                            <mat-select
                                placeholder="Nomination"
                                formControlName="sessionNominationCategoryType"
                            >
                                <mat-option [value]="Amazon Category'">AmazonData Category</mat-option>
                                <mat-option [value]="Amazon Type'">AmazonData Type</mat-option>
                                <mat-option [value]="Amazon Variety'">AmazonData Variety</mat-option>
                            </mat-select>
                        </mat-form-field>
                    </div>
Tags:

2

Answers


  1. 0

    If you want the options to show above the select, this css will do it for you!

    .show-up.mat-select-panel {
  transform: translateY(
    -106%
  ); /* please adjust this based on your requirement! */
}

    stackblitz

    Login or Signup to reply.
  2. 0 
       <style>
        table {
          font-family: arial, sans-serif;
          border-collapse: collapse;
          width: 100%;
        }

        td, th {
          border: 1px solid #dddddd;
          text-align: left;
          padding: 8px;
        }

        tr:nth-child(even) {
          background-color: #dddddd;
        }
        .dropbtn {
        background-color: rgb(29, 63, 85);
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        }

        .dropbtn:hover, .dropbtn:focus {
        background-color: rgb(38, 91, 126);
        }


        .dropdown {
        position: relative;
        display: inline-block;
        }

        .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        }

        .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        }

        .dropdown a:hover {background-color: #ddd;}

        .show {display: block;}
    </style>

    <style>
.filterDiv {
  float: left;
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}

/* Style the buttons */
.btn {
  border: none;
  outline: none;
  padding: 12px 16px;
    background-color: rgb(29, 63, 85);
    color: white;
  cursor: pointer;
}

.btn:hover{
        background-color: rgb(38, 91, 126);
        }

.btn.active {
  background-color: blue;
  color: red;
}
</style>
    <!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Broken Dropdown Buttons</title>
</head>
<body>

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">Example 1
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <a class="dropdown-item" href="#">Dropdown 1</a>
        <a class="dropdown-item" href="#">Dropdown 2</a>

    </div>


<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">Example 2
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <a class="dropdown-item" href="#">Dropdown 1</a>
    <a class="dropdown-item" href="#">Dropdown 2</a>
    <a class="dropdown-item" href="#">Dropdown 3</a>
</div>
      <button type="button" class="btn btn-primary" onclick="#">Regular Button 1</button>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search