Splitter and Docking re-size problem - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: docking, jqxDocking, jqxsplitter, resize, splitter, window

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 10 years, 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Splitter and Docking re-size problem Posts
May 4, 2014 at 7:13 am Splitter and Docking re-size problem #53905

arikbd
Participant

Hello,

I have a setting of two splitters and in each part a docking with window panel in it:

+————————————————————-+
| Splitter 1 | Splitter 2 |
| +————-+ | +———–+ +————————-+ |
| | win1 | | | win2 | | win2 | |
| +————-+ | +———–+ +————————-+ |
+————————————————————-+
|Splitter 3 |
|+———————————————————–+|
||win3 ||
|+———————————————————–+|
+————————————————————-+

When I re-size the top vertical splitter making splitter 1 wider this works fine the splitter and the windows in both splitter 1 and 2 resize OK, but when I resize again and reduce the size of splitter 1 the window(s) inside splitter 1 do not resize.

What I’m doing wrong?

This is the code I’m using:

<%@ page language=”java” contentType=”text/html; charset=utf-8″
pageEncoding=”utf-8″%>
<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>This example shows how to create a Grid from Array data.</title>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />

<script type=”text/javascript” src=”Charts/FusionCharts.js”></script>

<script type=”text/javascript” src=”js/jquery-1.10.2.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxexpander.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.columnsresize.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.pager.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdockpanel.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxdocking.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxsplitter.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”js/gettheme.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {

var theme = getDemoTheme();
$(‘#mainsplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘horizontal’,
panels: [{ size: 300, min: 300 }, {min: 200}] });
$(‘#topsplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, orientation: ‘vertical’,
panels: [{ size: 300, min: 250 }, {min: 450}] });
$(‘#leftdock’).jqxDocking( { orientation: ‘vertical’, width: ‘100%’, mode: ‘docked’});
$(‘#leftdock’).jqxDocking(‘hideAllCloseButtons’);
$(‘#leftdock’).jqxDocking(‘showAllCollapseButtons’);
$(‘#leftdock’).jqxDocking( ‘disableWindowResize’, ‘win1’);
$(‘#leftdock’).jqxDocking( ‘disableWindowResize’, ‘win2’);
$(‘#leftdock’).jqxDocking( ‘disableWindowResize’, ‘win3’);

$(‘#rightdock’).jqxDocking( { orientation: ‘horizontal’, width: ‘100%’, mode: ‘docked’});
$(‘#rightdock’).jqxDocking(‘hideAllCloseButtons’);
$(‘#rightdock’).jqxDocking(‘showAllCollapseButtons’);
$(‘#rightdock’).jqxDocking( ‘disableWindowResize’, ‘win4’);
$(‘#rightdock’).jqxDocking( ‘disableWindowResize’, ‘win5’);
$(‘#rightdock’).jqxDocking( ‘disableWindowResize’, ‘win6’);

$(‘#bottomdock’).jqxDocking( { orientation: ‘vertical’, width: ‘100%’, mode: ‘docked’});
$(‘#bottomdock’).jqxDocking({ disabled:true });
$(‘#bottomdock’).jqxDocking(‘hideAllCloseButtons’);
$(‘#bottomdock’).jqxDocking(‘showAllCollapseButtons’);
$(‘#bottomdock’).jqxDocking( ‘disableWindowResize’, ‘alerts’);

});

function load() {
// prepare the data

var theme = getDemoTheme();

}
</script>

</head>
<body class=’default’>
<div id=”main”>
<div>
<button type=”button” onClick=”load();”>Click Me!</button>
</div>
<div id=”workframe” style=”width:100%; height:720px;”>
<div id=”mainsplitter”>
<div>
<div id=”topsplitter”>
<div style=”overflow: scroll;”>
<div id=”leftdock”>
<div>
<div id=”win1″ style=”height: 200px;”>
<div>
win1Checks
</div>
<div style=”overflow: hidden;”>
Test win1
</div>
</div>
<div id=”win2″ style=”height: 200px;”>
<div>
win2
</div>
<div style=”overflow: hidden;”>
Test win2
</div>
</div>
<div id=”win3″ style=”height: 200px;”>
<div>
win3
</div>
<div style=”overflow: hidden;”>
Test win3
</div>
</div>
</div>
</div>
</div>
<div style=”overflow: scroll;”>
<div id=”rightdock” >
<div style=”width: 300px;”>
<div id=”win4″ style=”width: 250px; height: 300px”>
<div>
win4
</div>
<div style=”overflow: hidden;”>
Test win4
</div>
</div>
</div>
<div style=”width: 300px;”>
<div id=”win5″ style=”width: 250px;”>
<div>
win5
</div>
<div style=”overflow: hidden;”>
Test win5
</div>
</div>
</div>
<div style=”width: 300px;”>
<div id=”win6″ style=”width: 250px;”>
<div>
win6
</div>
<div style=”overflow: hidden;”>
Test win6
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div style=”overflow: scroll;”>
<div id=”bottomdock”>
<div>
<div id=”alerts” style=”height: 100%;”>
<div>
Alerts Settings
</div>
<div style=”overflow: hidden;”>
Alerts
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</body>
</html>

May 8, 2014 at 7:34 am Splitter and Docking re-size problem #54171

arikbd
Participant

This is still a problem.
Anyone know what the problem is?

10x

Arikbd

May 8, 2014 at 8:44 am Splitter and Docking re-size problem #54177

Dimitar
Participant

Hello Arikbd,

We could not reproduce the reported issue. On our side, the windows in Splitter 1 resize in both cases. Please make sure you are using the latest version of jQWidgets (3.2.2) and try again.

Best Regards,
Dimitar

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

May 8, 2014 at 1:25 pm Splitter and Docking re-size problem #54200

arikbd
Participant

Hi Dimitar,

Thanks. I have downloaded new version and I get the same result

This is after load

</iframe>” alt=”after load” />

This after re-size (wider)

</iframe>” alt=”resize (wider)” />

Still Ok. Now resize (nerrow)

</iframe>” alt=”nerrow” />

The window inside (win1) is not resized

I’m using the same code as above, I just downloaded version 3.2.2 and jquery version 1.11.1

Thanks.

Arikbd.

May 8, 2014 at 1:33 pm Splitter and Docking re-size problem #54204

arikbd
Participant

Sorry I had problem with the images

May 10, 2014 at 5:36 am Splitter and Docking re-size problem #54309

Dimitar
Participant

Hello arikbd,

We confirm the reported issue. It occurs in Google Chrome and Firefox but not in Internet Explorer. We will investigate it and if it is on our side, it will be fixed as soon as possible.

Best Regards,
Dimitar

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

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.