'How to spcify different position of elements that belong to the same css class

as shown below, i have two html elements of type clr-dropdown-menu.the problem i have is both of the drop-down-menus belong to the class .dropdown-menu. the .dropdown-menu contains the parameters that specify the appearance and the position of the two html elements. when i run the code, both of the dropdown-menu appear at the same position as they belong to the same class .dropdown-menu . i want to know how to display the two html element at different position despite they have the same .dropdown-menu class that contains the specifications of the position.

element1:

<clr-dropdown-menu id="idDropDownMenu" *clrIfOpen="false" clrPosition="top-left">
                        <div aria-label="Dropdown header" clrDropdownItem *ngFor="let item of overflowItems" (click)="onOverflowItemSelected(item)">
                            {{item}}
                        </div>
                    </clr-dropdown-menu>

element2:

<clr-dropdown-menu id="idDropDownMenu2" *clrIfOpen clrPosition="bottom-left">
                <div aria-label="Dropdown header" *ngFor="let insectiside of insectisidesArray" clrDropdownItem (click)="onInsecticideSelected(insectiside)">
                    {{insectiside}}
                </div>
            </clr-dropdown-menu>

.dropdown-menu

.idDropDownMenu {
    display: flex;
    flex-direction: column;
    min-width: 5rem;
    max-width: 15rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0.125rem;
    box-shadow: 0 1px 0.125rem rgb(115 115 115 / 25%);
    margin-top: 0.083333rem;
    padding: 0.5rem 0;
    visibility: hidden;
    z-index: 1000;
    margin-left: 673px
}
htmlcssangular


Solution 1:[1]

Use the class you gave and try to wrap it in parenting div?

<div style="display: flex; flex-direction: row">
  
  <clr-dropdown-men class="idDropDownMenu" id="idDropDownMenu *clrIfOpen="false" clrPosition="top-left">
    <div aria-label="Dropdown header" clrDropdownItem *ngFor="let item of overflowItems" (click)="onOverflowItemSelected(item)">
      {{ item }}
    </div>
  </clr-dropdown-menu>

  <clr-dropdown-menu class="idDropDownMenu" id="idDropDownMenu2" *clrIfOpen clrPosition="bottom-left" >
    <div aria-label="Dropdown header" *ngFor="let insectiside of insectisidesArray" clrDropdownItem (click)="onInsecticideSelected(insectiside)">
      {{ insectiside }}
    </div>
  </clr-dropdown-menu>

</div>

.idDropDownMenu {
    width: auto; 
    height: auto;
    display: flex;
    flex-direction: column;
    min-width: 5rem;
    max-width: 15rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0.125rem;
    box-shadow: 0 1px 0.125rem rgb(115 115 115 / 25%);
    margin-top: 0.083333rem;
    padding: 0.5rem 0;
    visibility: hidden;
    z-index: 1000;
    margin-left: 673px
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Joosep Parts

Related Questions