Make the content of a kendo tabStrip tab scrollable

Question

I have a kendo tabStrip within a splitter. I'm trying to get only the content of the selected tab to be scrollable. At the moment the entire splitter section scrolls over and the tabStrip disappears.

Is it possible to make only the tabs content scrollable?

Screens:

Code

@Html.HiddenFor(x => x.ID)
@(Html.Kendo().Splitter()
    .Name("splitter")
    .Orientation(SplitterOrientation.Vertical)
    .Events(ev => ev.Resize("EyeTestReportController.resizeGrid"))
    .HtmlAttributes(new { @class = "full-screen" })
    .Panes(panes =>
    {
        panes.Add().Resizable(false).Size("100px")
    .HtmlAttributes(new { @id = "grid-vertical-pane" })
    .Content(@<text>
        <div id="InfoScreen" style="display:inline-flex">                
        </div>
    </text>);
        panes.Add().HtmlAttributes(new { @id = "grid-summary-vertical-pane" }).Content(@<text>
            <div id="tabOptions" style="margin:5px; display:none; position:fixed!important;">
                <div id="backbtn">
                    <button class="k-primary k-button" style="margin-bottom:5px;" id="backToGrid" onclick="EyeTestReportController.onBackGrid()" aria-disabled="false" tabindex="0">Back to grid</button>
                </div>
                <div>
                    <label class="summary-label">Tab options</label>
                </div>
                <div id="stepButtons">
                    <button class="k-primary k-button" id="back" onclick="EyeTestReportController.onBackClick()" aria-disabled="false" tabindex="0">Back</button>
                    <button class="k-primary k-button" id="next" onclick="EyeTestReportController.onNextClick()" aria-disabled="false" tabindex="0">Next</button>
                    <button class="k-primary k-button" id="skip" onclick="EyeTestReportController.onSkipVAClick()" aria-disabled="false" tabindex="0">Skip</button>
                </div>
            </div>

            <div id="gridDiv">
                @(Html.Kendo().Grid<Website.Models.VisitModel.VisitGridModel>()
                        .Name("grid")
                        .ToolBar(toolbar =>
                        {
                    toolbar.Custom().Text("Create").Url("#").HtmlAttributes(new { @class = "k-primary k-button", @id = "addVisit", onclick = "EyeTestReportController.onAddVisitClick()" });
                    toolbar.Custom().Text("Edit").Url("#").HtmlAttributes(new { @class = "k-primary k-button", @id = "editVisit", onclick = "EyeTestReportController.onEditVisitClick()", disabled = "disabled" });

                })
                        .Columns(column =>
                        {
                    column.Bound(c => c.Date).Format("{0:MM/dd/yyyy}").Width(150);
                    column.Bound(c => c.PreScreening).Width(150);
                    column.Bound(c => c.Screening).Width(150);
                    column.Bound(c => c.ReadyMadeReaders).Width(150);
                    column.Bound(c => c.EyeExam).Width(150);
                    column.Bound(c => c.Glasses).Width(150);
                    column.Bound(c => c.Contacts).Width(150);
                    column.Bound(c => c.RetinalGrading).Width(150);
                    column.Bound(c => c.Status);

                })
                        .Events(e =>
                        {
                    e.Change("EyeTestReportController.itemGridSelect");
                })
                        .Sortable()
                        .Scrollable()
                        .Selectable()
                        .Resizable(resize => resize.Columns(true))
                        .Reorderable(reorder => reorder.Columns(true))
                        .NoRecords("No data")
                        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                        .Filterable(f => f.Operators(o => o.ForString(fs => fs.Clear().Contains("Contains").StartsWith("Start With").EndsWith("End with").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to"))))
                        .Pageable(page => page
                        .Refresh(true)
                        .ButtonCount(5)
                        .PageSizes(new string[] { "5", "10", "20", "100", "All" })
                        )
                        .DataSource(dataSource => dataSource
                        .Ajax()
                        .ServerOperation(true)
                        .Sort(s =>
                        {
                    s.Add(a => a.ID).Ascending();
                })
                        .Model(model =>
                        {
                    model.Id(i => i.ID);
                })
                        .Read(read => read.Action("ReadAllVisits", "EyeTestReport", new { PatientID = Model.ID }))
                        .Events(events => events.Error("Shared.onGridDataSourceError").RequestEnd("Shared.onGridRequestEnd"))
                        )
                )
            </div>

            <div id="testOptions" style="margin:5px;" hidden>
                @(Html.Kendo().TabStrip()
                        .Name("summary-tabstrip")
                        .Items(tabstrip =>
                        {
                    tabstrip.Add().Text("Pre-screening")
                .Selected(true)
                .Content(Html.Partial("~/Views/EyeTestReport/_Prescreening.cshtml").ToHtmlString());

                    tabstrip.Add().Text("Screening")
                .Enabled(false)
                .Content(Html.Partial("~/Views/EyeTestReport/_Screening.cshtml").ToHtmlString()

                );

                    tabstrip.Add().Text("Ready Made Readers")
                .Enabled(false)
                .Content(Html.Partial("~/Views/EyeTestReport/_ReadyMadeReaders.cshtml").ToHtmlString()

                );

                    tabstrip.Add().Text("Eye Examination")
                .Enabled(false)
                .Content(Html.Partial("~/Views/EyeTestReport/_EyeExamination.cshtml").ToHtmlString()

                );

                    tabstrip.Add().Text("Glasses")
                .Enabled(false)
                .Content(Html.Partial("~/Views/EyeTestReport/_Glasses.cshtml", new Website.Models.OptoServices.GlassesDetailModel()).ToHtmlString()

                );

                    tabstrip.Add().Text("Contact Lenses")
                .Enabled(false)
                .Content(Html.Partial("_ContactLenses").ToHtmlString()

                );

                    tabstrip.Add().Text("Retinal Grading")
                .Enabled(false)
                .Content(Html.Partial("_RetinalGrading").ToHtmlString()

                );

                    tabstrip.Add().Text("Referral")
                .Enabled(false)
                .Content(Html.Partial("_Referral").ToHtmlString()
                );
                }))
            </div>
        </text>);
    })
)

Thank you in advance

I have removed the top part of the content to make the code less on the question.

Answer 1

It seems to be enough to give the tabs a fixed height and let the content overflow automagically:

<style type="text/css">
    #splitter {

    }

    #tabs {
        height: 100px;
        overflow: auto;
    }

    .content {
        font-size: 64px;
    }
</style>

@helper GetTabs() { 
    @(Html.Kendo().TabStrip()
        .Name("tabs")
        .Items(i =>
        {
            i.Add().Text("Tab 1").Content("<div class='content'>Tab 1: foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</div>").Selected(true);
            i.Add().Text("Tab 2").Content("<div class='content'>Tab 2: foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</div>");
            i.Add().Text("Tab 3").Content("<div class='content'>Tab 3: foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar foo bar</div>");
        }));
}

@(Html.Kendo().Splitter()
    .Name("splitter")
    .Panes(p =>
    {
        p.Add().Content("Left");
        p.Add().Content(GetTabs().ToHtmlString());
    })
)