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

Custom Icon to Expand/Collapse

1 Answer 219 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 1
Jeff asked on 23 Mar 2017, 10:28 PM

Hi,

 

I am using Kendo splitter to duplicate a layout to an existing app. The layout is a collapsible pane on the left thats only 200px wide when expanded In the existing app, there is an icon to toggle the collapsible pan. The icon sits in the top right corner of the left pane, and overflows the pane.

What is the best way to implement this icon that toggles the pane from collapsed to expanded?

From my perspective, I have two choices. 

1. I can use CSS to change the existing .k-splitbar icons to match my design needs. The problem with this method is that the clickable region that triggers the expand/collapse is only as wide as the k-splitbar container.  I need the clickable region to be at least 40px by 40px. How might I expand the clickable region?

2. I add my own button (an A tag) in my collapsed pane, absolutely position the icon to the correct space, and use javascript to expand/collapse the pane. The problem with this method is that I was unable to figure out how to get the pane to allow overflow (overflow: visible). I've seen numerous links for how to get the pane to allow overflow. however I can't seem to trump the inline style that kendo is adding to the pane. What is the bast way to allow overflow on panes?

 

Please and thanks.     

1 Answer, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 27 Mar 2017, 10:58 AM
Hi Jeff,

We have created this Dojo sample with implementing the solution from the first point - by CSS. We have added absolute positioning to collapse icon.

Hoping this solution will meet your expectations.

Regards,
Magdalena
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Splitter
Asked by
Jeff
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
Share this question
or