Styling dataItems in kendoTreeViewNodeTemplate (Angular)

Question

So for my Angular application I created a menu-builder using the Kendo-TreeView component.

I would like to have my action buttons for the nodes to be nicely aligned on the right side as you can see in the picture.

Preview of the problem and where I would like to have the buttons aligned

Right now this is my code inside the TreeView using the KendoTreeViewNodeTemplate

<ng-template kendoTreeViewNodeTemplate let-dataItem>
        <div class="menu-tree-line">
          <div class="menu-tree-dataItem">
          <span [ngClass]="{'group-item': dataItem.type === 'GROUP'}">
            @if (dataItem.icon != null && dataItem.icon != '') {
              <i class="{{dataItem.icon}}"></i> -
            }
            {{ dataItem.title }} |
          </span>
          </div>
          <div class="menu-btn-tree-container">
            <app-crm-button [buttonIcon]="'feather icon-edit'"
                            (buttonClick)="openForm(dataItem)"
                            [buttonTooltip]="dataItem.type === 'GROUP' ? 'Bewerk menu groep' : 'Bewerk menu item'"
            >
            </app-crm-button>
            @if (dataItem.type == 'GROUP') {
              <app-crm-button [buttonIcon]="'feather icon-plus'"
                              (buttonClick)="initiateAddChildMenuItem(dataItem)"
                              [buttonTooltip]="'Voeg nieuw sub item toe'"
              ></app-crm-button>
            }
            @if (dataItem.type != 'GROUP') {
              <app-crm-button [buttonIcon]="'feather icon-trash-2'" [buttonColor]="'error'"
                              [buttonTooltip]="'Verwijder menu item'"
                              (buttonClick)="deleteMenuItem(dataItem)"
              >
              </app-crm-button>
            }
            @if (dataItem.type == 'GROUP' && dataItem?.children?.length == null) {
              <app-crm-button [buttonIcon]="'feather icon-trash-2'" [buttonColor]="'error'"
                              [buttonTooltip]="'Verwijder menu groep'"
                              (buttonClick)="deleteMenuItem(dataItem)"
              >
              </app-crm-button>
            }
          </div>
        </div>
      </ng-template>

This is the CSS

.menu-tree-line {
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  width: 100%;
}

.menu-tree-dataItem {
  display: flex;
  align-items: center;
  gap: 5px; /* Space between the text and icon */
}

.menu-btn-tree-container {
  display: flex;
  gap: 5px;
  margin-left: 10px;
  align-items: flex-end !important;
}

I am trying to get it to work with flexbox but it's not working.

Any help is very much appreciated.

Thanks!

Answer 1

You can try the below CSS. Might need to align using padding.

The fix involves removing display: flex with block and inline-block so that it goes to the full width.

Finally on the child, we use display: flex; justify-content: space-between to make the elements located end to end.

.custom-treeview .k-treeview-top,
.custom-treeview .k-treeview-mid,
.custom-treeview .k-treeview-bot {
  display: block !important;
}

.custom-treeview .k-treeview-leaf {
  display: inline-block !important;
  width: 100% !important;
}

.custom-treeview .k-treeview-leaf > span {
  display: flex !important;
  justify-content: space-between !important;
}

Stackblitz Demo