I'm currently working on a dropdown menu and I have a specific requirement – the menu should always be split into two columns and be able to span multiple lines. However, I've encountered an issue where the columns are not aligned properly, causing them to be at different positions.
Could someone provide me with guidance on how to ensure that all elements in my dropdown menu are properly aligned?
Thank you for your help.
HTML Snippet:
<ul class="list-group">
<div *ngFor="let menu of ArrayMenu">
<div *ngIf="menu.sons == true">
<div class="dropright">
<div class="myListGroup" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img class="img-responsive" src="data:image/png;base64,{{menu.icon}}">
<span>{{menu.desc}}</span>
</div>
<div class="dropdown-menu mydropdown">
<div *ngFor="let item of ArrayMenu">
<div *ngIf="item.idMenu == menu.id" style="width: 100%;height: 100%;margin: 8px;">
<div class="divFilhos">
<img class="img-responsive" src="data:image/png;base64,{{item.icon}}">
<span>{{item.desc}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ul>
Issue Example: