angular kendo splitter does not work with height = 100%

6 posts, 1 answers
  1. BRAD
    BRAD avatar
    27 posts
    Member since:
    May 2012

    Posted 12 Sep 2014 Link to this post

    I have the attached plunkr here:
    http://plnkr.co/edit/5IE41TtnWHpjLZqzRidk
    where i'm using the angular kendo splitter, and i have the height set to 100% and it's just entirely collapsed.  If i remove the height style, it shows fine, but just not with the height filled out.  What am i missing here to make sure the splitter fills out the entire height of the page?  Thank you for your help!
  2.
  3. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 15 Sep 2014 Link to this post

    Hello Brad,

    In CSS, a percentage-based height property works if the parent element has height. Therefore, the controller div, and the body and the html need to have a 100% height, too. Here is the forked plunkr that shows this.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. BRAD
    BRAD avatar
    27 posts
    Member since:
    May 2012

    Posted 15 Sep 2014 in reply to Alex Gyoshev Link to this post

    Thank you, that does help.  My original code had multiple nested divs above the spiltter, and and needed them all set to 100%. 
    I am, however, stuck with one other problem though.  I'm using a horizontal splitter, and a lot of the content in one of my panes spills over vertically.  The scrollbar for the splitter shows up fine, but unfortunately so does the one for the browser/page.  It's only a little bit, but i can't figure out a way to make sure only 1 scrollbar shows.  I haven't been able to come up with a test plunkr that shows this yet, but I was hoping you might have some ideas regardless.
  7. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 16 Sep 2014 Link to this post

    Hello Brad,

    It is likely that some of the elements with 100% height have borders, padding, and/or margins. Any of these will sum up with the 100% height because of the default browser box model, and will make the content more than 100% in height, triggering the scrollbar. You can resolve this by zeroing them out via CSS. Be aware that the html and body tags have default margin / padding. After verifying that all the content is correctly sized, you can set the html/body overflow to hidden, so that the browser scrollbar is never shown.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8.
  9. BRAD
    BRAD avatar
    27 posts
    Member since:
    May 2012

    Posted 17 Sep 2014 in reply to Alex Gyoshev Link to this post

    the problem ended up being with my page being segmented out like:
    <body>
    <header></header>
    <div></div>
    <footer></footer>
    </body>

    my splitter is in the 'div' section, and what happens is that when the splitter height is set to '100%', it acts as if the header and footer don't exist.  the second scrollbar is there because of the header and footer, and it won't go away unless you remove those 2 objects.  
    Is there a way around this issue?
  11. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2527 posts

    Posted 18 Sep 2014 Link to this post

    Hello Brad,

    There are several ways around this problem, depending on the browser support that you want to achieve. Here are two:

    • To achieve maximum compatibility (think IE7, etc), you can size the <div> with JavaScript, getting the page height and removing the height of the header and footer, i.e.
      $("body>div").height($("body").outerHeight()
          - $("header").outerHeight()
          - $("footer").outerHeight()
      );
      Make sure to execute this on window.resize, too.
    • If you are OK with supporting IE9 and newer, you can use the CSS calc property (see its browser support), setting the following:
      body>div {
          /* change 100px to the combined height of header and footer */
          height: calc(100% - 100px);
      }
    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top