Problem by collapse or resizing jqxSplitter

[ChristianBParticipant]

Hello JQX-Team,

I’ve a Problem by resize or collapse/expand the jqxSpitter.
Please have a look on my example: https://www.jseditor.io/?key=morepageapp-resize-problem
After the first module loading everything looks good. Collapse/expand Methods working good and the embedded module occupies the available space.
If I load the second module the collapse/expand Methods no longer work without error. The embedded module no longer takes 100% of the available space.
It would be nice to know what I’m doing wrong here.

Have a good Time

Best Regards
Christian Backes

[Peter StoevKeymaster]

Hi Christian,

Both panels are with collapsible – false so they would not be collapsible. I would like to suggest you also to post your Splitter related questions in the Splitter Forum.

Best Regards,
Peter Stoev

[ChristianBParticipant]

Hello Peter,
thanks for the answer.
Yes, only the ‘Master’ Splitter is collapsible. And here is my Problem.
Do this:
Step1: Click Button ‘Load Module 1’
Step2: Click Button ‘Load Module 2’
Step3: Collaps the master-panel.
Now You can see that the nestet Layout not longer takes 100% of the available Space.

Sorry for post in wrong Forum. I thought that this is a ‘starter’ theme. For me it is the first step to building my App.

Best Regards
Christian

[ChristianBParticipant]

Hi,
is it possible to pull this Post in the jqxSplitter Formum?

regards
Christian

[Peter StoevKeymaster]

Hi Christian,

The collapsible is set to false and so the collapse will be disabled. This is how it should behave when collapsible is false.

Regards,
Peter

[ChristianBParticipant]

Hi Peter,
$('#splitter1').jqxSplitter({ height: '100%', width: '100%', splitBarSize:7, touchSplitBarSize:20, resizable : true, panels: [{ size: '20%' }, { size: '80%', collapsible: false}] });

spliter1 is not false. Only the right panel is false. The nested splitters are false too. But this is not important.
Next example: Part2

LLAP
Christian

[Peter StoevKeymaster]

Hi Christian,

Removestyle="overflow: hidden; width: 100%; height: 100%" from jqxExpander’s DIV tag. Setting CSS properties to the elements of a widget will break its layout and that’s exactly the problem here.

Best Regards,
Peter Stoev

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

[ChristianBParticipant]

Hallo Peter,
first: thank you for your patience.
Unfortunately this does not work.
Only this can suppress the malfunction (only a Workaround):

$('#splitter1').on('expanded', function (event) {
	$('#msplitter1').jqxSplitter('refresh');
});
$('#splitter1').on('collapsed', function (event) {
	$('#msplitter1').jqxSplitter('refresh');
});

or this:

$('#splitter1').on('resize', function (event) {
	$('#msplitter1').jqxSplitter('refresh');
});

I’ve tested many times, different ways. I make 1:1 Copy from your Splitter->nested Splitter Demo an modified it for “Load Module on ButtonClick”. Always the same Problem by loading the second / sometimes the third Module.
Please, my example is writable…

Best Regards
Christian

[Peter StoevKeymaster]

Hi Christian,

Sorry, but I don’t see a reason why you need to call “refresh” or something like that. There is no issue on my side with jqxSplitter.

Best Regards,
Peter Stoev

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

[ChristianBParticipant]

Hi Peter,
sorry for this question but i do not know what you mean: you can’t see the issue in my Code-Example?

regards
Christian

[Peter StoevKeymaster]

Hi Christian,

I wrote you what you should do and you did not do it in your example. There is nothing more I can add here. This is not a problem in jqxSplitter, but a problem due to invalid custom style attribute set to inappropriate place in the HTML markup.

Best Regards,
Peter Stoev

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

[ChristianBParticipant]

Hi Peter,
of course I have test your suggestion, but it dont work in my example.
Now i’ve modified and save the example-code
A Screenshot from my result is here

Maybe it is faster you post a suggestion (CODE) here?

Best Regards
Christian

PS: in my Workplace i am on the way to get the Enterprise License. Hope to get it next day’s.

[ChristianBParticipant]

me again,
OK, in both loaded Modules i’ve take the same id for the nested splitter.
If i change it to different id’s the issue is solved.
Solution: $('#msplitter1').jqxSplitter('destroy');
Next Step: I print a book of your API-Dokumentation and hammer it against my head.

enjoy your day
Christian

[Author]

Posts