[Solved] Sizing TabStrip to 100%

[Lucas]

Hello,

I am having some trouble getting the tab strip and the contents inside each tab container to size to 100%. I would like the tabstrip to take up 100% of the view (minus a header) and I would like every control placed inside each tab to fill it up completely. 

There seems to be some sort of default padding inside each tab container and I cant seem to get rid of it.

I have attached my sample application to show what I am seeing. 

In each tab I have a basic div with its border being displayed to show the padding issues. On my Viewer tab I have a splitter control that I want to take up the whole tab. I also dont want any scroll bars in either of the panes in the splitter.

Any help would be greatly appreciated!

[Dimo]

Hi Lucas,

In order to remove the default TabStrip content padding, you can use:

div.t-tabstrip .t-content
{
    padding:0;
}

Generally, if you want the TabStrip to fill the available space perfectly, you need to set the height for the tabContentLayout elements with Javascript, as current web standards do not have a "occpy all available vertical space" option.

Kind regards,
Dimo
the Telerik team

[Lucas]

Hi Dimo,

Thank you for your quick response. The CSS below fixed my issue...

On setting the height of tabContentLayout elements with Javascript: Do you have an example of this? 

Thanks,
Lucas

[Dimo]

Hi Lucas,

You can use the following jsFiddle demo:

http://jsfiddle.net/dimodi/QZcH7/

All the best,
Dimo
the Telerik team