<div>    
        <smart-split-pane id="split-view" *ngIf="!hideDetailView" [visibility]="visibility || 'md,lg'">
            <div left-pane class="col-12">
                <smart-tree-list
                    [disabled]="treeDisabled"
                    [loadChildren]="loadChildren"
                    [height]="height"
                    [rootNode]="rootNode"
                    [hasChildren]="hasChildren"
                    [isSelected]="isSelected"
                    [rootNodeExpandedByDefault]="rootNodeExpandedByDefault"
                    [columnHeadersStatic]="columnHeadersStatic"
                    [columnWidths]="columnWidths"
                    [mainColumnHeader]="mainColumnHeader || ''"
                    (onNodeSelection)="handleNodeSelection($event)"
                    (onContextMenuClick)="handleContextMenuClick($event)"
                    [items]="nodeContextMenu"
                ></smart-tree-list>
                
            </div>
            <div right-pane class="col-12">
                <div #formContainer>
                    <smart-form
                        (viewLoaded)="detailFormLoaded()"
                        [smart-form-layout]="detailView && detailView.Template">
                    </smart-form>
                </div>
            </div>
        </smart-split-pane>

    </div>
    <div *ngIf="hideDetailView">
        <smart-tree-list
            [disabled]="treeDisabled"
            [loadChildren]="loadChildren"
            [height]="height"
            [rootNode]="rootNode"
            [hasChildren]="hasChildren"
            [isSelected]="isSelected"
            [rootNodeExpandedByDefault]="rootNodeExpandedByDefault"
            [columnHeadersStatic]="columnHeadersStatic"
            [columnWidths]="columnWidths"
            [mainColumnHeader]="mainColumnHeader || ''"
            (onNodeSelection)="handleNodeSelection($event)"
        ></smart-tree-list>
    </div>
        
    

./smart-tree-view.component.css

::ng-deep .tree-column.intermediate {
    border-left: 1px solid #D5D5D5 !important;
    border-right: 1px solid #D5D5D5 !important;
}

 ::ng-deep .tree-column .number {
    text-align: right !important
}

 ::ng-deep .disabled-overlay {
    position: absolute;
    background-color: lightgray;
    opacity: 0.6;
  /*  height: 100%;
    margin-left: 0px;
    margin-top: 0px;*/
    z-index: 9999
}

 ::ng-deep .context-menu-list,
.context-menu-item {
    border-radius: 0px !important;
}

 ::ng-deep .context-menu-list {
    margin: 0px !important
}

 ::ng-deep .context-menu-list p {
    margin: 0px !important;
    cursor: pointer !important;
}

 ::ng-deep .context-menu-item:hover {
    background-color: lightgray;
    text-decoration: none !important;
    cursor: pointer !important;
}

 ::ng-deep .smart-tree-body-container>p-treetable>.ui-treetable.ui-widget>.ui-treetable-tablewrapper>table>thead>tr.ui-state-default {
    display: none;
}

 ::ng-deep tbody.ui-treetable-data.ui-widget-content {
    border: 0 transparent !important;
}

 ::ng-deep .smart-tree-body-container {
    border-left: 1px solid #D5D5D5;
    border-bottom: 1px solid #D5D5D5;
    border-top: 0 transparent;
}

 ::ng-deep .resize-handle {
    position: absolute;
    margin-top: 0px;
    margin-right: 0px;
    bottom: 0;
    width: 1px;
    cursor: w-resize;
    background: #D5D5D5;
    height: 28px;
}

::ng-deep .ui-contextmenu.hidden {
    display: none !important;
}

::ng-deep .smart-tree-view-node-image {
    margin-left: 10px;
}

::ng-deep .smart-tree-view-node-label {
    margin-left: 8px;
}

::ng-deep .smart-tree-view-context-menu-container ul.k-menu {
    z-index: 9999 !important;
}

::ng-deep smart-split-pane#split-view left-pane div,
::ng-deep smart-split-pane#split-view right-pane div {
    padding: 0px !important;
}