splitter with bootstrap grid

4 posts, 0 answers
  1. Mike
    Mike avatar
    8 posts
    Member since:
    Apr 2016

    Posted 16 Jun Link to this post

    I'm working on a project where I have 2 horizontal panes. The left side is a tree view and the right side is the content view (Think windows explorer). Is it possible to have a content layout (grid) in that right pane that will resize based on the size of the splitter pane? Right now I can't seem to get controls to stack properly when the pane is resized.  This isn't a kendo issue exactly, but I'm hoping someone else has worked through this.  My left pane is going to start with a fixed size and the right pane takes the remainder of the viewport. 
  2. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 20 Jun Link to this post

    Hello Mike,

    I have prepared the following Dojo example, where a similar scenario like the one described is demonstrated.

    You will notice that the above example does not use any of the bootstrap classes like col-*-* to achieve the desired effect. Is this the behavior that you are expecting on your end?

    In addition to the above, please keep in mind that Kendo UI uses content-box box model, whereas Bootstrap uses border-box. This breaks the layout of the Kendo UI widgets, which are placed inside a Bootstrap grid layout. You can find more information and a workaround in the following article:


    In case the above example differs from what you are trying to achieve, may I ask you to modify it so that it reproduces the issue faced and send it back to us for a review? This way I will be able to troubleshoot the cause of the problem and provide you with further assistance.

    I am looking forward to your reply.

    Regards,
    Dimitar
    Progress Telerik
    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.
  3. Mike
    Mike avatar
    8 posts
    Member since:
    Apr 2016

    Posted 20 Jun in reply to Dimitar Link to this post

    Thanks for the response. That's not what I have right now.  I'll have to update it when I'm off work.  

    Basically what I need is where you have the grid in the right pane to be a bootstrap container to work with existing ui work. 

    I may scrap the idea of using the splitter if there is no easy way to do this and just not allow the user to resize the treeview area. 

  4. Dimitar
    Admin
    Dimitar avatar
    176 posts

    Posted 21 Jun Link to this post

    Hello Mike,

    I have modified the Dojo example which now uses the bootstrap container-fluid class to take 100% of the right pane. In addition to this, I have applied the fix suggestion in the Boostrap integration article for the box-sizing property, which makes the grid columns to stack correctly.

    Can you please verify if this is the behavior that you are expecting on your end?

    If this is not the case, may I ask you to modify the Dojo sample and send it back to us for a review along with additional clarifications and guidelines to what exactly are you trying to achieve. This way I will be able to investigate the issue further and provide you with a viable suggestion.

    Regards,
    Dimitar
    Progress Telerik
    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