Splitter does not show scrollbars

[SkippingAdiParticipant]

Hi All

I have created the page below (Asp.Net MVC 4, Bundling of then jqwidgets JavaScript Librariers not shown).

I have created a layout based on some jqxSplitter widgets and placed a jqxGrid and a jgxTree widget into two of the panels. I have sized the grid and the tree view so that they are widther and heighter than the sourounding panels. Then, when the site is displayed in the browser I expect to see the scrollbars of the panels automatically as the widgets should detect that the contet is too large to display, but the scrollbars are not shown! If I manually size the splitters the scrollbars still will not be shown.

This page is largely based on the jgxwidgets demo examples for jgxsplitter. Thus I expected it should simple work. Data loading will not work and also the theming is actualy wrong, but should not have impact onto the described problem.

Please teach me what I did wrong?
Regards
Adrian

@{
ViewBag.Title = “MainLayout”;
}
<h2>MainLayout</h2>
<div id=”mainSplitter”>
<div class=”splitter-panel” id=”firstNested”>
<div class=”splitter-panel”>
<span class=”panel-content”>North</span>
<div id=”jqxponysearchgrid”></div>
</div>
<div class=”splitter-panel” id=”secondNested”>
<div class=”splitter-panel”>
<span class=”panel-content”>west</span>
<div style=”height: 100%;” id=”jqxTree”>
<ul>
<li style=”width: 500px; background-color: red;”>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
</div>
<div class=”splitter-panel”>
<span class=”panel-content”>center</span>
</div>
</div>
</div>
<div class=”splitter-panel”>
<span class=”panel-content”>East</span>
</div>
</div>
@section Scripts {
<script type=”text/javascript”>
$(document).ready(function () {
//Splitter konfigurieren
var theme = ‘black’;
$(‘#mainSplitter’).jqxSplitter({ width: ‘auto’, height: 600, theme: theme, panels: [{ max: ‘960px’, size: 700, collapsible: false }, { size: 250 }] });
$(‘#firstNested’).jqxSplitter({ width: ‘auto’, height: 600, theme: theme, orientation: ‘horizontal’, panels: [{ size: 200, collapsible: false }, { size: 400 }] });
$(‘#secondNested’).jqxSplitter({ width: ‘auto’, height: 400, theme: theme, panels: [{ size: 150 }, { size: 550, collapsible: false }] });

function centerChild(element) {
var displacementY = ($(element.parent()).height() – element.outerHeight()) / 2,
displacementX = ($(element.parent()).width() – element.outerWidth()) / 2;
element.css(‘top’, displacementY);
element.css(‘left’, displacementX);
return element;
}

$(‘#mainSplitter, #firstNested, #secondNested’).on(‘resize’, function () {
centerLabels();
});

$(‘#mainSplitter, #firstNested, #secondNested’).on(‘expanded’, function () {
centerLabels();
});

$(‘#mainSplitter, #firstNested, #secondNested’).on(‘collapsed’, function () {
centerLabels();
});

function centerLabels() {
var labels = $(‘.panel-content’);
for (var i = 0; i < labels.length; i += 1) {
centerChild($(labels[i]));
}
}

centerLabels();

//jqxGrid konfigurieren
var source =
{
url: “api/apiPony/searchpony/”,
datatype: “json”,
datafields: [{ name: “Name”, type: “string” }, { name: “ZBNr”, type: “string” }]
};

var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxponysearchgrid”).jqxGrid(
{
width: 700,
height: 350,
theme: ‘black’,
source: dataAdapter,
columns: [
{ text: ‘Name’, dataField: ‘Name’, width: 100 },
{ text: ‘ZBNr’, dataField: ‘ZBNr’, width: 100 }]
});

$(‘#jqxTree’).jqxTree({
width: 300,
height: 500,
theme: ‘black’
});
});
</script>
}

[DimitarParticipant]

Hello SkippingAdi,

A workaround on the matter is to set the overflow-x of the panels with jqxGrid and jqxTree to auto, i.e.:

            <div class="splitter-panel" style="overflow-x: auto;">
                <div id="jqxgrid">
                </div>
            </div>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[SkippingAdiParticipant]

Hi Dimitar

Thank you for your reply.
Your workaround seems to work as expected.

Your workaround implies that there is a bug in splitter widget, isn’t it? Because documentation about splitter widget says that it generates panels for both sides of the splitter and about the jgxpanel is wirtten: “This widget is a container for other widgets or elements. It automatically adds horizontal and vertical scrollbars, if the content is not fully visible”.
Perhaps the question is more: Does the panels Array of the splitter widget reference jqxPanels or some other kind of panels?

For the moment I can live with the workaround you sugested.

Thanx
Adrian

[DimitarParticipant]

Hi Adrian,

We have created a work item on the matter and will fix the issue as soon as possible.

As for using jqxPanels – yes, to properly initialize the splitter, you need to reference the file jqxpanel.js.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Peter SlothParticipant]

Hi

I am running the latest version of the framework, and the above still seems to be an issue.
If I apply the workaround mentioned the scrollbars don’t seem to be styled according to the current theme, so it would be nice to have the fix for the issue.

Any ETA on this?

thanks

best regards
Peter Sloth

[Peter StoevKeymaster]

Hi Peter,

The Splitter does not display jqxScrollbars and it never did. It displays the browser’s scrollbars when overflow is enabled. Splitter provides Layout and nothing more. That is its purpose by design. If you want to have jqxScrollbars inside the Splitter, then use widgets that work with jqxScrollbar like jqxPanel, jqxGrid, jqxListBox, etc.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts