Border styles and scrollbar

3 posts, 0 answers
  1. Ryan
    Ryan avatar
    60 posts
    Member since:
    Mar 2012

    Posted 12 Jun 2013 Link to this post

    I've customized the look of the splitter a bit to match some UI mockups I am designing against. I've avoided margin/border/padding on k-pane elements at all costs. However, I am revisiting the issue and am wondering if anyone has any tips to correct the current problem I'm facing.

    Currently, I draw the borders and apply margin to an element within the k-pane. The best I can make things look is this: 

    I want the border outside the scrollbar. But I also want the scrollbar to be generated by the splitter and not defined by an element nested inside of it. Like this:

    Help/tips are appreciated.
  2. Ryan
    Ryan avatar
    60 posts
    Member since:
    Mar 2012

    Posted 12 Jun 2013 Link to this post

    Have been working on this for a bit. I have to apply the border to the k-pane because that's where k-scrollable is placed and the border must surround that. My layout is splitter1 -> pane -> splitter2 -> pane. I do not think it is feasible to put an additional element between the splitter2 and the pane.

    So, attached is the current look. It does what I want it to except that the borders push the layout horizontally and vertically (as expected) and the overflow is clipped. Is there somewhere I could put some margin or padding to bring these clipped borders back within view?  Or is there a different approach?

  3. Dimo
    Dimo avatar
    8322 posts

    Posted 14 Jun 2013 Link to this post

    Hi Ryan,

    The Splitter panes should not have margins, paddings and borders. This is a requirement by design, which ensures faster and easier size calculations and layout adjustment.

    Adding elements in the DOM hierarchy between the Splitter element and the Pane elements will not produce the desired result, because the Splitter expects the children of its wrapper element to be pane elements, so it will simply change the pane elements.

    In your case I can suggest you to disable pane scrolling and use scrollable <div>s as children of the panes. Since these <div>s will have borders (and possibly paddings), then simply setting 100% height will lead to content overflow. You will have to calculate their heights in each Splitter's layoutChange event. All Splitter panes have width and height set at all times, which will make your task easier.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top