I have a few pages with the code structure below and I'm looking to make the right pane a floating pane. The reason for this is because the panel bar in the left pane can be quite long when expanded. The right pane displays functions from the item selected in the left pane and hence they need to be visible at all times when the user scrolls down. What's the best way to achieve this?
Here is a sample of the code:
<kendo-splitter orientation="horizontal"> <kendo-splitter-pane size="50%" min="40%"> <div class="panelbar-wrapper"> <kendo-panelbar [expandMode]="kendoPanelBarExpandMode" (stateChange)="onPanelChange($event)" [keepItemContent]="true"> <kendo-panelbar-item ...... </kendo-panelbar-item> </kendo-panelbar> </div> </kendo-splitter-pane> <kendo-splitter-pane min="40%"> <div *ngIf="openannotation" class="container card"> <app-annotation [taskId]="selectedTaskId" [expId]="expId"></app-annotation> </div> </kendo-splitter-pane> </kendo-splitter>
thanks in advanced,