jQuery UI Widgets Forums Getting Started Problem by collapse or resizing jqxSplitter

This topic contains 12 replies, has 2 voices, and was last updated by  ChristianB 4 years, 7 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author

  • ChristianB
    Participant

    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 Stoev
    Keymaster

    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


    ChristianB
    Participant

    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

    • This reply was modified 4 years, 7 months ago by  ChristianB.

    ChristianB
    Participant

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

    regards
    Christian

    • This reply was modified 4 years, 7 months ago by  ChristianB.

    Peter Stoev
    Keymaster

    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


    ChristianB
    Participant

    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 Stoev
    Keymaster

    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/


    ChristianB
    Participant

    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

    • This reply was modified 4 years, 7 months ago by  ChristianB.
    • This reply was modified 4 years, 7 months ago by  ChristianB.
    • This reply was modified 4 years, 7 months ago by  ChristianB.

    Peter Stoev
    Keymaster

    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/


    ChristianB
    Participant

    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 Stoev
    Keymaster

    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/


    ChristianB
    Participant

    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.

    • This reply was modified 4 years, 7 months ago by  ChristianB.

    ChristianB
    Participant

    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

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

You must be logged in to reply to this topic.