This is a migrated thread and some comments may be shown as answers.

Splitter "handles" appear over grid column picker

2 Answers 115 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 05 Aug 2019, 11:13 PM
I have a kendo-grid inside one pane of an adjustable kendo-splitter.  When I open the grid's column menu, the "handles" that you click on to adjust the size of the panes appear above the column menu.  A screen shot is attached - you can see the black vertical lines on either side of the word "Visible".  

What's the Kendo way of solving this problem?  Override the z-index of the column menu or the pane handles?  Something else?  

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 07 Aug 2019, 01:54 PM
Hello Ed,

Indeed, the reason for the described undesired layout is that the Popup by default calculates its z-index based on the z-index of the anchor it is opened from, while the z-index of the Splitter is set to 200 by the theme.

I can suggest overwriting the z-index of the Splitter pane resize handle (setting it to 1 seems to be yielding the expected result):

https://stackblitz.com/edit/angular-rbpdcs-i7pdfs?file=app/app.component.ts

Setting the z-index of the Popup container via CSS is not ideal as there is no way to distinguish between all popups opened from different components (like Grid Filter and Column menus, DropDownList list of options, DatePicker Calendar etc.) and setting the same z-index for all such elements may potentially cause unexpected or undesired side effects.

I also logged an enhancement issue to our Kendo Themes repository so we can inspect the case further, and if there is no particular reason for the Splitter resize handler to have a z-index of 200, we can address this in a future version of the themes too so that the overwrite suggested above will not be necessary. You can track the issue in the Kendo Themes public GitHub repo:

https://github.com/telerik/kendo-themes/issues/845

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik
Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ed
Top achievements
Rank 1
answered on 07 Aug 2019, 06:00 PM
Thank you!  I appreciate that you explained your reasoning - with HTML and CSS there are countless ways to style components and I'd like to be sure that I'm styling the "Kendo way"
Tags
Splitter
Asked by
Ed
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Ed
Top achievements
Rank 1
Share this question
or