This is a migrated thread and some comments may be shown as answers.

Setting tab content to remaining height of tabstrip wrapper

1 Answer 645 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 24 Aug 2017, 03:01 PM

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

 

 

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 25 Aug 2017, 03:23 PM
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.
Tags
TabStrip
Asked by
Richard
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or