使剑道 tabStrip 选项卡的内容可滚动
Posted
技术标签:
【中文标题】使剑道 tabStrip 选项卡的内容可滚动【英文标题】：Make the content of a kendo tabStrip tab scrollable 【发布时间】：2019-06-21 12:16:06 【问题描述】：我在拆分器中有一个剑道 tabStrip。我正在尝试仅使选定选项卡的内容可滚动。此时整个拆分器部分滚动，tabStrip 消失。
是否可以只让标签内容可滚动？
屏幕：
代码
@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>);
)
)
提前谢谢你
我已经删除了内容的顶部，以减少问题上的代码。
【问题讨论】：
【参考方案1】：给选项卡一个固定的高度，让内容自动溢出似乎就足够了：
<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());
)
)
【讨论】：
这是我之前所做的，现在将发布答案，感谢您的时间和精力:)以上是关于使剑道 tabStrip 选项卡的内容可滚动的主要内容，如果未能解决你的问题，请参考以下文章