IxTree Integration with IxDropdown not working properly #2025
Description
Prerequisites
- I have read the Contributing Guidelines.
- I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.
What happened?
When integrating an IxTree component inside an IxDropdown, the dropdown menu fails to display properly. Specifically, the dropdown menu renders with both height and width values of 0, making it effectively invisible and unusable.
Observed Behavior
The dropdown appears to function normally until clicked
Upon clicking to open the dropdown, the menu does not visually appear
Investigation shows the dropdown menu element is being rendered with height: 0 and width: 0
What type of frontend framework are you seeing the problem on?
Angular (NgModule)
On which version of the frontend framework are you experiencing the issue?
@angular/core: 20.1.2
Which version of iX do you use?
v3.1.0
Code to produce this issue.
https://stackblitz.com/edit/j8h8x4-tpkzspn7
<div class="row mx-4">
<label class="text-default mb-1" for="treeDrop" translate>TreeDropdown</label>
<ix-dropdown-button outline label="select tree elements" closeBehavior="outside" placement="bottom-end">
<div class="family-dropdown">
<div class="treeContainer">
<ix-tree root="root" [model]="familyTree"
[context]="familyTreeContext"
[renderItem]="treeItem" />
</div>
@if (multiselect) {
<div class="d-flex pt-2 pb-1" id="multiselect">
<ix-button class="w-100 px-2">
multi de-/select
</ix-button>
</div>
}
</div>
</ix-dropdown-button>
</div>
<ng-template #treeItem let-item>
<div class="d-flex align-items-center">
@if (item.isStep && multiselect) {
<ix-checkbox [label]=item.name [checked]="isSelectedPerson(item.id)"
(checkedChange)="selectPerson(item.id, $event)"/>
} @else if (item.isStep && !multiselect) {
<ix-radio class="col-auto me-3" [label]=item.name [checked]="isSelectedPerson(item.id)"
(checkedChange)="selectPerson(item.id, $event)"/>
} @else {
<label class="text-default">{{ item.name }}</label>
}
</div>
</ng-template>