Hide the bar

15 posts, 1 answers
  1. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 22 Aug 2011 Link to this post

    Ok, so I want my top panel to be expanded, and not allow resizing, so ideally I'd like the "bar" between the panes to be 0px in width as really it serves no purpose anymore :)

    ...so how can I accomplish that?  It's something that the RadControls do...is it doable by pure CSS perhaps? 

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 23 Aug 2011 Link to this post

    Hello Steve,

    This is not supported in the current beta. However, we implemented it for the next one (and the attached file contains the updated script -- it is the same file as in your other post). With it, you can style the required splitbar to 0px through something like the following CSS:

    .t-pane:first-child + .t-splitbar {
        width: 0;
        overflow: hidden;
        border-width: 0;
    }

    Or, if you use JavaScript to set the splitbar size, please make sure to call the splitter resize() method afterwards.

    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!
  3. Kendo UI is VS 2017 Ready
  4. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 23 Aug 2011 Link to this post

    HAHA!  Life saver thanks!

    When can we expect a new release?
  5. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 23 Aug 2011 Link to this post

    Hmmm...what would be more handy is if you decorated the splitbars with a class I can handle when it's expanded and no resizing is available...or perhaps let me define a css class in the pane definition?...or have a new property which is hidebar:true...

    I hate the idea of having a massive nested list of these...
    .t-pane:first-child + .t-splitbar
  6. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 24 Aug 2011 Link to this post

    Hello Steve,

    Well, the CSS rule from yesterday was targeting only the first splitbar (not very useful). We don't have a specific CSS for the non-draggable splitbars, but we have for the draggable ones, so:

    .t-splitter .t-splitbar {
        width: 0;
        height: 0;
        overflow: hidden;
        border-width: 0;
    }
     
    .t-splitter .t-splitbar-draggable-horizontal {
        width: 5px;
        border-width: 0 1px;
        height: 100%;
    }
     
    .t-splitter .t-splitbar-draggable-vertical {
        height: 5px;
        border-width: 1px 0;
        width: 100%;
    }

    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!
  7. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 12 Oct 2011 Link to this post

    ...any plans for this yet by any chance?

    k-splitbar-static or something? (curious if it just isnt implemented or never will be implemented)

    Let me just show why this is causing issues...

    http://screencast.com/t/FXSJzLetNIF8

    I want to GLOBALLY say inside of this "rightPane" div...if I see a splitter whos pane isn't at all moveable, collapsible, expandable...I just want the dude hidden.

    Problem is there's no classes to help me.  Like if that one at the bottom right had a t-splitbar.t-collapsable or SOMETHING that differentiated it from the one above I could style around that perhaps (does that make sense?)
  8. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Oct 2011 Link to this post

    Hi Steve,

    We have not implemented such a behavior yet, but it is reasonable, so we will think about it. In the meantime, I suggest you to try executing the following script after initializing the Splitter:

    var splitterElement = $("#SplitterID");
    $(".k-splitbar-horizontal", splitterElement).filter(":empty").css({ "width": "0", "border-right-width": "0"});
    $(".k-splitbar-vertical", splitterElement).filter(":empty").css({ "height": "0", "border-bottom-width": "0"});
    splitterElement.trigger("resize");

    Alternatively, setting a 1px width / height and not removing a border will yield nice narrow (3px wide) splitbars.

    Best wishes,
    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. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Oct 2011 Link to this post

    Hi again,

    The narrow "static" splitbar has been implemented for non-resizable non-collapsible panes. It will be 3px wide - two 1px borders plus 1px of empty space in between.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 13 Oct 2011 Link to this post

    Oh sweet!  Thanks again guys :)

    So now I assume it has a class i can hook into to make it invisible (for my purposes)?
  11. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 13 Oct 2011 Link to this post

    Yes, the CSS classes are

    k-splitbar-static-horizontal
    and
    k-splitbar-static-vertical

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 13 Oct 2011 Link to this post

    Ah nice nice...could I bother you perhaps for the all.min.js that contains that change perhaps (or a new build?)
  13. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 14 Oct 2011 Link to this post

    Hello Steve,

    Here it is.

    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!
  14. Steve
    Steve avatar
    1851 posts
    Member since:
    Dec 2008

    Posted 14 Oct 2011 Link to this post

    This is fantastic, thanks so much for listening!
  15. Mikkel
    Mikkel avatar
    58 posts
    Member since:
    Aug 2012

    Posted 15 Oct 2012 Link to this post

    What if I want to set border for selected panes only (like top pane and bottom pane in an Outlook-ish Splitter layout)?

    Why didn't you supply methods for setting splitter heights, widths etc. like normally in MVC:

    horizontalPanes.Add()
        .HtmlAttributes(new { id = "left-pane" })
        .Size("200px")
        .Collapsible(true)
        .Splitter(splitter => splitter.Height(0))
        .Content(@<div>Content goes here</div>);
  16. Josh
    Josh avatar
    50 posts
    Member since:
    Jul 2009

    Posted 01 Mar 2013 Link to this post

    +1 for next release have MVC wrappers to hide/style a specific splitter without to do CSS gymnastics.
Back to Top
Kendo UI is VS 2017 Ready