How to make tabstrip height expand to fit all content?

[Brett]

The tabstrip expands to fit content to a point then stops. And if you put a splitter inside it doesn't expand at all and instead scrollbars appear.

I have a large grid in a tab and I want the tabstrip to fit to the grid size which is taller than the window. How can I do that? Can it be done with split content too?

[Ivan Danchev]

Hello Brett,

Here's a dojo example, with a TabStrip in the first tab of which a Grid higher than the window is initialized. The tab resizes accordingly and fits the Grid. Could you modify the example and demonstrate the issue with the not expanding? As for nesting a splitter inside the tab, does the splitter itself resize to fit its content? If the splitter maintains its fixed height then the tab would not resize either and the splitter's own scrollbar will be displayed (if its content exceeds its height).

Regards,
Ivan Danchev
Progress Telerik

[Brett]

Hi Ivan,

I modified your Dojo by adding a splitter and it shows the behavior/problem:

https://dojo.telerik.com/AtAkiyid/4

The table in the right pane no longer causes the tabstrip to extend to fit it. What am I doing wrong? How can I fix?

Thanks,

Brett

[Ivan Danchev]

Hi Brett,

In the demonstrated scenario it is the Splitter that does not resize, not the TabStrip. See the following HowTo article on how to resize the Splitter with its content. In the example you linked this can be done with 2 modifications:

1. The following styles added:

<style>
  html,
  body,
  #splitter
  {
      height:100%;
      margin:0;
      padding:0;
  }
</style>

2. The following code in the Grid's dataBound handler:

dataBound: function(e) {
    var gridHeight = e.sender.wrapper.height();
    $(document).find("body").height(gridHeight);
    var splitter = $("#splitter").data("kendoSplitter");
    splitter.resize(true);
}

Here's the modified example.


Regards,
Ivan Danchev
Progress Telerik

[Brett]

Thanks Ivan, but the example you provided doesn't look like it's working. The "some content" is above the table and there is no splitter on the page.

[Ivan Danchev]

Hi Brett,

It appears I have linked the wrong example. I am sorry for this oversight on my part. Here's the updated dojo. And the link to the mentioned HowTo article about expanding the Splitter to its content.

Regards,
Ivan Danchev
Progress Telerik