Hi,
when I use an asset selector <c8y-asset-selector-miller< inside a <cdk-step> the asset selector is shrank in height and misses some elements, see following screenshot:
The template looks as follows:
<cdk-step label="Assign devices or device groups" state="final">
<div class="flex-col flex-nowrap no-align-items p-48 fit-h col-md-12 col-md-offset-0 c8y-stepper--no-btns">
<div class="card-header separator" style="justify-content: center">
<h4 class="card-title d-flex">
<div class="text-center">
<span>Device selection</span>
</div>
</h4>
</div>
<div>
<c8y-asset-selector-miller [(ngModel)]="selectedDevices" (onSelected)="selectionChanged($event)"
style="height: 500px" [config]="{
groupsSelectable: true,
columnHeaders: true,
showFilter: true,
showUnassignedDevices: true,
showChildDevices: true,
search: true,
multi: true,
showSelected: true
}" class="bg-component"></c8y-asset-selector-miller>
</div>
</div>
<c8y-stepper-buttons class="d-block card-footer p-24 separator fit-w sticky-bottom bg-level-0"
(onCancel)="cancel.emit()" (onCustom)="onCommitButton()" [labels]="{ custom: 'Confirm' }"
[class.user-no-admin-or-create-role]="!feature?.userHasMappingAdminRole && !feature?.userHasMappingCreateRole">
</c8y-stepper-buttons>
</cdk-step>
As soon as I place out side of , the component is rendered as expected.
What do I have to change?
–Christof
Try setting the height in the parent div and remove it from the component
<cdk-step label="Assign devices or device groups" state="final">
<div class="flex-col flex-nowrap no-align-items p-48 fit-h col-md-12 col-md-offset-0 c8y-stepper--no-btns">
<div class="card-header separator" style="justify-content: center">
<h4 class="card-title d-flex">
<div class="text-center">
<span>Device selection</span>
</div>
</h4>
</div>
<div style="height: 500px">
<c8y-asset-selector-miller [(ngModel)]="selectedDevices" (onSelected)="selectionChanged($event)"
[config]="{
groupsSelectable: true,
columnHeaders: true,
showFilter: true,
showUnassignedDevices: true,
showChildDevices: true,
search: true,
multi: true,
showSelected: true
}" class="bg-component"></c8y-asset-selector-miller>
</div>
</div>
<c8y-stepper-buttons class="d-block card-footer p-24 separator fit-w sticky-bottom bg-level-0"
(onCancel)="cancel.emit()" (onCustom)="onCommitButton()" [labels]="{ custom: 'Confirm' }"
[class.user-no-admin-or-create-role]="!feature?.userHasMappingAdminRole && !feature?.userHasMappingCreateRole">
</c8y-stepper-buttons>
</cdk-step>```
Hi Carlos,
I tried the changed template and it this does not fix the issue. The result is still the same.
Still elements are overlaid and others are not visible, e.g. text “Asset selection”
–Christof
There are other missing classes in the markup try with these changes
<cdk-step label="Assign devices or device groups" state="final">
<div class="d-col no-align-items p-48 fit-h fit-w c8y-stepper--no-btns">
<div class="card-header separator fit-w j-c-center">
<h4 class="card-title fit-w text-center">
Device selection
</h4>
</div>
<div class="flex-grow">
<c8y-asset-selector-miller [(ngModel)]="selectedDevices" (onSelected)="selectionChanged($event)"
[config]="{
groupsSelectable: true,
columnHeaders: true,
showFilter: true,
showUnassignedDevices: true,
showChildDevices: true,
search: true,
multi: true,
showSelected: true
}" class="bg-component"></c8y-asset-selector-miller>
</div>
</div>
<c8y-stepper-buttons class="d-block card-footer p-24 separator fit-w sticky-bottom bg-level-0"
(onCancel)="cancel.emit()" (onCustom)="onCommitButton()" [labels]="{ custom: 'Confirm' }"
[class.user-no-admin-or-create-role]="!feature?.userHasMappingAdminRole && !feature?.userHasMappingCreateRole">
</c8y-stepper-buttons>
</cdk-step>```
Hi Carlos,
I have a minimal sample to reproduce what is working and NOT working.
It seems that the c8y-asset-selector-miller is rendered correctly only if it is the first step in the stepper. In all other cases it is rendered incorrectly.
<c8y-stepper class="d-col no-align-items fit-h c8y-stepper--no-btns a-i-center"
[disableDefaultIcons]="{ edit: true, done: false }" [customClasses]="[
'col-xs-10',
'col-sm-8',
'm-t-24',
'm-b-40',
'p-0',
'flex-no-shrink'
]">
<cdk-step label="Assign devices or device groups">
<div class="d-col no-align-items p-48 fit-h fit-w c8y-stepper--no-btns">
<div class="card-header separator fit-w j-c-center">
<h4 class="card-title fit-w text-center">
Device selector working as first step
</h4>
</div>
<div class="flex-grow">
<c8y-asset-selector-miller [config]="{
groupsSelectable: true,
columnHeaders: true,
showFilter: true,
showUnassignedDevices: true,
showChildDevices: true,
search: true,
multi: true,
showSelected: true
}" class="bg-component"></c8y-asset-selector-miller>
</div>
</div>
<c8y-stepper-buttons class="d-block card-footer p-24 separator fit-w sticky-bottom bg-level-0"
(onCancel)="onCancel()" [labels]="{ custom: 'Confirm' }">
</c8y-stepper-buttons>
</cdk-step>
<cdk-step label="Assign devices or device groups">
<div class="d-col no-align-items p-48 fit-h fit-w c8y-stepper--no-btns">
<div class="card-header separator fit-w j-c-center">
<h4 class="card-title fit-w text-center">
Device selector NOT working as second step
</h4>
</div>
<div class="flex-grow">
<c8y-asset-selector-miller [config]="{
groupsSelectable: true,
columnHeaders: true,
showFilter: true,
showUnassignedDevices: true,
showChildDevices: true,
search: true,
multi: true,
showSelected: true
}" class="bg-component"></c8y-asset-selector-miller>
</div>
</div>
<c8y-stepper-buttons class="d-block card-footer p-24 separator fit-w sticky-bottom bg-level-0"
(onCancel)="onCancel()" (onCustom)="onCommitButton()" [labels]="{ custom: 'Confirm' }">
</c8y-stepper-buttons>
</cdk-step>
</c8y-stepper>
-Christof
