Hide bars

7 posts, 2 answers
  1. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 13 Jan 2012 Link to this post

    Similar to this thread: http://www.kendoui.com/forums/ui/splitter/hide-the-bar.aspx

    How do I hide all borders on the splitter? I've tried the above approach with no luck?
  2.
  3. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 16 Jan 2012 Link to this post

    Hello Gabriel,

    Do you need all of the splitbars hidden, or only the static ones? Here's a jsFiddle that shows how to hide the static splitbars. If that is not your scenario, please modify the example to describe your exact problem.

    Kind regards,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 19 Jan 2012 Link to this post

    Another thing however, doing this:
    .k-splitter .k-splitbar-static-vertical {
        width: 0;
        border-width: 0;
    }

    Does not hide the bar, rather set it to 1px...
  7. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 20 Jan 2012 Link to this post

    Hi,

    Please inspect the splitbar with Firebug to see whether the additional styles that you have added, are applied correctly. Here is a demo that works as expected:

    http://jsfiddle.net/gyoshev/Ep66V/show/

    Greetings,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 22 Jan 2012 Link to this post

    Okay, got it now - thanks. How do you remove the outer border all together?
  11. Gabriel
    Gabriel avatar
    79 posts
    Member since:
    Nov 2011

    Posted 25 Jan 2012 Link to this post

    I've managed to remove some of the borders by setting the border to zero for k-pane.
    But there are still borders and there seems to be dozens and dozens of syles being applied.

    I would like to remove ALL borders from a splitter. This includes the outer border around the splitter, all splitbars and any other border thay may be applied.
  13. Answer
    Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 26 Jan 2012 Link to this post

    Hi Gabriel,

    The Splitter basically uses 2 CSS classes for applying borders and backgrounds:

    k-splitter
    k-splitbar

    There are others as well, but they are not important, as they only add some flavor to the styling.

    So you simply need to enforce a zero border width to the above classes, and zero width/height to the splitbars, as they also have a background color.


    div.k-splitter,
    .k-splitter .k-splitbar {
        border-width: 0; 
    }
     
    .k-splitter .k-splitbar {
        width: 0;
        height: 0;
    }

    Note that the above CSS selectors use some additional elements (e.g. div) to increase their specificity and override successfully the theme styles.

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