I have 2 panes in my splitter. No matter what I do, the right hand pane is always overlaying the position of the left hand pane, i.e. style=left:0px. How can I fix it so that the right hand pane appears to the right of the left hand one? Aslo, the size of the pane is not correct and does not reflect the sizes I set in the cshtml.
When I resize the broswer window, it displays as it should- it is just on the initial render that it doesn't work. Code is below:
@{
Html.Kendo().Splitter()
.Name("report-splitter")
.Panes(panes =>
{
//Report List
panes.Add().Size("250px").Resizable(false).Scrollable(false)
.LoadContentFrom(Url.Action("ReportList", "Report", new { Group = reportingContextType }));
//Report Details
panes.Add().Size("650px").Resizable(false).Scrollable(false)
.Content(@<text>
<div id="report-toolbar" class="report-toolbar"></div>
<div id="report-parameters"></div>
<div id="report-body" >
<div style="text-align: center">
<p>Select a report from the list</p>
<br/>
<img src="~/Images/report.png" />
</div>
</div>
</text>);
})
.HtmlAttributes(new { style = "min-height: 600px;" })//forcing the splitter to be bigger than default 300px
.Render();
}
<script>
$(document).ready(function (e) {
$("#report-splitter").kendoSplitter({
panes: [
{ resizable:false, collapsible: false, size: "250px" },
{ resizable: false, collapsible: false, size: "650px" }
]
});
});
</script>
When I resize the broswer window, it displays as it should- it is just on the initial render that it doesn't work. Code is below:
@{
Html.Kendo().Splitter()
.Name("report-splitter")
.Panes(panes =>
{
//Report List
panes.Add().Size("250px").Resizable(false).Scrollable(false)
.LoadContentFrom(Url.Action("ReportList", "Report", new { Group = reportingContextType }));
//Report Details
panes.Add().Size("650px").Resizable(false).Scrollable(false)
.Content(@<text>
<div id="report-toolbar" class="report-toolbar"></div>
<div id="report-parameters"></div>
<div id="report-body" >
<div style="text-align: center">
<p>Select a report from the list</p>
<br/>
<img src="~/Images/report.png" />
</div>
</div>
</text>);
})
.HtmlAttributes(new { style = "min-height: 600px;" })//forcing the splitter to be bigger than default 300px
.Render();
}
<script>
$(document).ready(function (e) {
$("#report-splitter").kendoSplitter({
panes: [
{ resizable:false, collapsible: false, size: "250px" },
{ resizable: false, collapsible: false, size: "650px" }
]
});
});
</script>