Custom Icon to Expand/Collapse

2 posts, 0 answers
  1. Jeff
    Jeff avatar
    20 posts
    Member since:
    Jan 2017

    Posted 23 Mar 2017 Link to this post



    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.     

  2. Magdalena
    Magdalena avatar
    482 posts

    Posted 27 Mar 2017 Link to this post

    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.

    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.
Back to Top