Setting tab content to remaining height of tabstrip wrapper

2 posts, 0 answers
  1. RichardAD
    RichardAD avatar
    133 posts
    Member since:
    Feb 2012

    Posted 24 Aug Link to this post

    I have a single page with a tabstrip. The second tab has dual list boxes. 

    In the sample dojo example, what additional css or javascript (for resize events) can be added to ensure the height of the list boxes fill the height of the tab strip content space below H2 ?

    I've tried some things like height:100% is css but that did not affect the listbox.

    The height being rendered appears to be 200px coming from kendo.common.min.css

    Thanks,

    Richard

     

     

  2. Neli
    Admin
    Neli avatar
    28 posts

    Posted 25 Aug Link to this post

    Hello Richard,

    Besides that the height must be set to 100%, there was padding coming from the Kendo css classes. I added a little bit of styles to the dojo example. Currently the padding of the second tab is set to 0px (the div with id="content-2").
    #content-2{
          padding: 0px;
        }

     There was also margin around the <h2> element, that now is set to margin-bottom: 0px.
    #header-content-2{
          margin-bottom: 0px;
        }


    With the described above only the second tab will be styled. if you need to set styles to all TabStrip containers in the example you can use the following css rule:

    .k-panelbar .k-tabstrip>.k-content, .k-tabstrip>.k-content{
     padding:0px;
    }

    Please do not hesitate to contact us in case you need further assistance.

    Regards,
    Neli
    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