Sticky/Floating panel help

1 Answer 99 Views
Accessibility
Carla
Top achievements
Rank 1
Veteran
Carla asked on 20 May 2021, 01:20 AM

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

 

1 Answer, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 24 May 2021, 05:01 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Accessibility
Asked by
Carla
Top achievements
Rank 1
Veteran
Answers by
Georgi
Telerik team
Share this question
or