Tab Content Height becoming Zero Pixels

[Jonathan]

I have an MVC project that implements a database-driven questionnaire for legal contracts using Kendo MVC for ASP.NET version 2016.2.714. I am running into an odd rendering problem with the Tab Strip when I mix programmatic tab selection with manual tab selection.

The questionnaire is arranged into sections, sub-sections, and questions with answers. The user is expected to read a contract presented on the page and answer all of the “required” questions. Because there are about 100 questions on this thing (lawyers!), we allow the user to save a partially-entered questionnaire and return to it later. Because there are so many questions, there is a lot of vertical scrolling going on.

My page uses a vertically-arranged Kendo Splitter to separate the questionnaire from the contract document. Inside the Splitter, a Kendo Tab Strip organizes the questionnaire’s sections, which contain varying numbers of questions. Many partial views are used to render the questionnaire’s overall structure and content. A Kendo Progress Bar is used to display the user’s progress in answering all required questions, and we also prompt the user when they submit to remind them when the questionnaire isn’t 100% entered. If the user cancels that prompt, they can continue answering questions.

During testing, our customer observed that when “required” questions haven’t been answered, the user didn’t know where to look for a missing answer in the sea of questions. So I am implementing a mechanism to display the first unanswered question. I do this by scrolling the Kendo Tab’s DIV that is containing my questionnaire’s section content. So far, so good.

It’s all working perfectly except for one strange thing… the Tab Strip control. I knew that if the first unanswered question was on a different section (i.e. another Kendo Tab) than the one being viewed, that I would have to programmatically select that tab before scrolling its contents. Unfortunately, I have encountered a dramatic sizing anomaly in Kendo.

Out of the three questionnaire sections, one is very tall and the other two are short. I have discovered that if I am viewing either of the two short sections, then initiate the code to bring me to the first unanswered question (which is in the tallest section), the tall section shows just fine. But if I then click the Tab Strip to view the short section I just came from, it’s totally empty! The remaining short section is unaffected until I perform the same sequence of steps on that section. When I do, both short sections become zero pixels tall.

What I observed by using Internet Explorer’s DOM explorer was something strange happening to the “k-content” DIV in the Tab Strip when I use its “select()” method in JavaScript. For the tab I am currently viewing when my scripts runs, it gets a “height: auto” attribute added to it (where none existed before). The Tab Strip then switches to the desired tab as expected. But if I then manually click back to that original tab, its “height: auto” attribute is replaced with a “height: 0px” attribute and I see no content under that tab.

If I use the DOM explorer to remove the height attribute altogether, the content under that tab is restored to its normal appearance. But if I continue to click on tabs, the “height” attribute is immediately re-introduced.

None of this “height” attribute stuff happens if I click on the tabs manually. Only if I programmatically select one with script does the problem begin.
The Razor for my Tab Strip looks like this (see below). This code actually lives in a partial view that the Kendo Splitter presents, so basically the Tab is surrounded by the Splitter. I experimented with using no tab animation, to no avail.

        @(Html.Kendo().TabStrip()
            .Name("uxSections")
            .SelectedIndex(0)
            .Animation(a => a.Open(e => e.Fade(FadeDirection.In).Duration(AnimationDuration.Fast)))
            .Items(t =>
            {
                foreach (SectionViewModel sectionViewModel in Model.QuestionnaireRevision.Sections.OrderBy(s => s.SortOrder))
                {
                    t.Add()
                        .Text(sectionViewModel.Description)
                        .HtmlAttributes(new
                        {
                            id = $"uxSectionTab{sectionViewModel.SectionId}"
                        })
                        .Content(Html.Partial("_QuestionnaireSection", sectionViewModel).ToHtmlString());
                }
            })
        )

I tried stripping my JavaScript code down to the barest essentials (and hard-coded stuff just in case), and what I was left with consists of the following JavaScript statements. Section 2 is the tall section I am switching to. I removed all the code that tries scrolling.

        var sectionId = 2;
        var tabStrip = $("#uxSections").kendoTabStrip().data("kendoTabStrip");
        var item = tabStrip.tabGroup.find("#uxSectionTab" + sectionId);
        tabStrip.select(item.index());

If I click on one of the short sections and trigger this code (which takes me to the tall section), then when I manually click back on the short section’s tab, its contents are zero pixels tall.

[Veselin Tsvetanov]

Hello Jonathan,

Thank you for the detailed explanation of your scenario.

The problem in your case is that at the moment when you are trying to get a reference to the TabStrip, you are initializing it again:

var tabStrip = $("#uxSections").kendoTabStrip().data("kendoTabStrip");

You should instead get a reference using the jQuery data() method:

var tabStrip = $("#uxSections").data("kendoTabStrip");

Simple implementation of the above could be found in the following Dojo example.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Jonathan]

Thank you very much! Definitely a whoops on my part, it's working now.