Sticky/Floating panel help

[Carla]

Hi,

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,

Carla

 

[Georgi]

Hello Carla,

Thank you for getting in touch with us regarding this issue and providing information about it.

From what I understand, you are looking for a behavior where one side of the Splitter component is scrollable, and the other one is fixed.

This is, however, the way the Splitter behaves by default as demonstrated in this example. What exactly do you mean by "floating" pane?

May I ask you to clarify what your requirement is? If possible, if you could fork the demo above and modify it in a way which reproduces the undesired behavior, that would also be very useful for troubleshooting.

Looking forward to hearing from you.

Regards,
Georgi
Progress Telerik