Setting tab content to remaining height of tabstrip wrapper

[Richard]

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

 

 

[Neli]

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