jQuery UI Widgets Forums Layouts Layout and Docking Layout Autohide content disappearing problem

This topic contains 17 replies, has 4 voices, and was last updated by  admin 2 years, 5 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
  • Autohide content disappearing problem #121581

    NormB
    Participant

    Some code snippets:

    <div id='jqxLayout' style='margin-right:30px'>
    	<div data-container='TunelistPanel'>
    		<div id='tunesTree'></div>
    	</div>
    	<div data-container='MenuPanel'>
    		<div id='jqxMenu' style='border: none;'>".ABCmenu()."</div>
    	</div>
    	<div data-container='AbcPanel'>
    			<textarea id='abctextarea' spellcheck='false' class=$text_area_class></textarea>
    	</div>
    	<div data-container='ModifiedPanel'>
    		<textarea id='modtextarea' spellcheck='false' readonly class=$text_area_class style='background-color:lightblue;color:black'></textarea>
    	</div>
    	<div data-container='MusicDisplayPanel'>
    		<div id='musicdiv'></div>
    	</div>
    	<div data-container='CodesPanel'>
    			<textarea id='codestextarea' spellcheck='false' class='textAreaStyle'></textarea>
    	</div>
    </div>
    
    		
    var layout = [{
    	type: 'layoutGroup',
    	orientation: 'horizontal',
    	items: [
    		{
    			type: 'autoHideGroup',
    			alignment: 'left',
    			width: '5%',
    			unpinnedWidth: '20%',
    			items: [
    				{
    					type: 'layoutPanel',
    					title: 'Menu',
    					contentContainer: 'MenuPanel'
    				},
    				{
    					type: 'layoutPanel',
    					title: 'Tunes',
    					contentContainer: 'TunelistPanel'
    				}
    			]
    		}, 
    		{ // LHS
    			type: 'layoutGroup',
    			width: '45%',
    			orientation: 'vertical',
    			items: [
    				{ // LHS - Upper
    					type: 'tabbedGroup',
    					height: '100%',
    					items: [
    						{ // Tab 1
    							type: 'layoutPanel',
    							title: 'ABC',
    							contentContainer: 'AbcPanel',
    							selected: true
    						},
    						{ // Tab 2
    							type: 'layoutPanel',
    							title: 'Modified',
    							contentContainer: 'ModifiedPanel'
    						}
    					]
    				}
    			]
    		},
    		{ // RHS
    			type: 'layoutGroup',
    			width: '50%',
    			orientation: 'vertical',
    			items:[
    				{ // RHS Upper
    					type: 'tabbedGroup',
    					height: '100%',
    					items: [
    						{ // Tab 1
    							type: 'layoutPanel',
    							title: 'Music',
    							contentContainer: 'MusicDisplayPanel',
    							selected: true
    						},
    						{ // Tab 2
    							type: 'layoutPanel',
    							title: 'Codes',
    							contentContainer: 'CodesPanel'
    						}
    					]
    				}
    			]
    		}
    	]
    }];
    
    My issue is with the TunelistPanel that contains "tunesTree"
    The tree is populated after an Ajax call to get a file list.........
    
    tree = $('#tunesTree');
    tree.jqxTree({
    	source: data.Filelist
    });
    

    My problem is occurring when I make a call collapse nodes in the tree using tree.jqxTree(‘CollapseAll’) or similar.

    If I have pinned the “Tunes” tab everything behaves as expected. I can expand or collapse at will and all content is visible.
    If, however, the Tunes tab is expanded, not pinned, then the expandAll or collapseAll call causes the tab to autohide (expected behaviour??). When I open it again it shows the content if I have made a call to expand, but if the call was to collapse the panel is apparently empty. I am pretty sure the content is there, but just not visible, maybe the tree has zero width or something.

    Any idea what may be causing this?

    Thanks


    NormB
    Participant

    Now realised I have said “pinned” and “unpinned” the wrong way round. i.e. All works fine when “unpinned”, not when “pinned.

    Autohide content disappearing problem #121585

    Martin
    Participant

    Hello NormB,

    Yes, the content is not visible because of its width and height after reopening the panel.
    You can fix this by using CSS. In your case:

    #tunesTree, #paneltunesTree, .jqx-tree-dropdown-root {
      height: 100% !important;
      width: 100% !important;
    }

    Here is an Example.

    Best Regards,
    Martin Yotov

    jQWidgets team
    https://www.jqwidgets.com

    Autohide content disappearing problem #121587

    NormB
    Participant

    Thanks Martin,

    That works well, I was getting quite frustrated with it. I had tried a couple of work arounds that were only partially successful.

    However I now have two further problems.

    1) Each item in my tree expands with 50-100 items below it so it was necessary for me to add scrolling. When I did that I had the same problem of extraneous scroll bars showing as I asked about before for my textareas (AbcPanel and ModifiedPanel in my layout), so I applied the same technique as you showed me before and my CSS now looks as follows:

    
    #tunesTree, #paneltunesTree, .jqx-tree-dropdown-root {
      height: calc(100% - 4px) !important;
      width: calc(100% - 4px) !important;
      overflow-y: scroll;
    }
    

    This works absolutely fine on my Linux box but for some reason not so on my Windows boxes. No matter how large I set N in “calc(100% – Npx) the unwanted scroll bars will not disappear.

    Any idea what may be different between the two OS systems that is causing this?

    2) “ensureVisible” is not working in the tree.

    I make calls:

     tree.jqxTree('ensureVisible', item);
      tree.jqxTree('selectItem', item);
    

    The item gets selected (if I call select first), but “ensureVisible” returns an error:
    `
    uncaught (in promise) TypeError: a(…).position() is undefined
    ensureVisible https://192.168.1.139/node_modules/jqwidgets-framework/jqwidgets/jqxtree.js:8
    invoke https://192.168.1.139/node_modules/jqwidgets-framework/jqwidgets/jqxcore.js:15
    jqxWidgetProxy https://192.168.1.139/node_modules/jqwidgets-framework/jqwidgets/jqxcore.js:15
    b.jqx.jqxWidget/b.fn[h]/< https://192.168.1.139/node_modules/jqwidgets-framework/jqwidgets/jqxcore.js:15
    jQuery 2
    ………….my function call stack

    Any clues?

    Thanks

    Norman

    Autohide content disappearing problem #121588

    NormB
    Participant

    Update…….

    Regarding the scroll bar problem…

    It seems that it is NOT working on EITHER OS – EXCEPT in the internal browser that Netbeans runs (my development environment) where it appears to be working fine. Firefox and Opera on the Linux box still show the unwanted scroll bar (as do Firefox, Chrome and Edge on the Windows boxes). I was led into a false sense of security by it appearing to work in Netbeans.

    Norman


    NormB
    Participant

    Update 2…

    Fixed the scroll bar issue – should have been obvious that that form of CSS was applying scroll bars to more than 1 div. The following now works:

    
    
    #tunesTree, #paneltunesTree, .jqx-tree-dropdown-root {
      height: calc(100% - 4px) !important;
      width: calc(100% - 4px) !important;
    }
    
    .jqx-tree-dropdown-root {
    	overflow-y: scroll;
    }
    

    Sorry for any inconvenience.

    I still have the “ensureVisible” problem.

    Norman


    ivanpeevski
    Participant

    Hi Norman,

    The problem could be caused by the wrong initilization of the jqxTree. When integrating other widgets inside a jqxLayout, they should be initialized inside a initContent function, have a look at our example here.

    Please let me know if this fixes the issue for you!
    Best Regards,
    Ivan Peevski

    jQWidgets team
    https://www.jqwidgets.com


    NormB
    Participant

    Thank you for the suggestion. As it is the recommended method I have now incorporated this but it still does not work.

    In my layout (as above) I have now added initContent: TunesTreeInit after the contentContainer: 'TunelistPanel' line, where function TunesTreeInit is as follows.

    
    var TunesTreeInit = function() {
    	var tree = $('#tunesTree');
    	var url= '/DancingMaster/AbcData.php?action=AbcFilelist';
    	ReturnAjax(
    		url,
    		null,
    		function(data) {
    			if(data.Result === 'OK') {
    				tree.jqxTree({ source: data.Filelist });
     			} else {
    				jqAlert(data.Message);
    			}
    		}
    	);
    };
    

    This populates the tree with a list of files and there is then an .on(‘expand’) call that populates the file node with a list of tunes in the file via an Ajax call (there will typically be 50-100 tunes in a file).

    I perform various actions, some of which require a refresh after which I want to open the autoHide and have the selected tune name visible without having to scroll down to it. This is done as follows:

    
    function OpenAutoHide(label, item) {
    	// Open the labelled auto-hide tab, check first whether already open
    	var autohides = $('.jqx-layout-group-auto-hide li');
    	var tree = $('#tunesTree');
    	$.each(autohides, function() {
    		if(this.innerText === label) {
    			if(!$(this).hasClass('jqx-ribbon-item-selected')) { // It is not already open
    				$(this).click();
    			}
    			if(item) {
    				tree.jqxTree('selectItem', item);
    				tree.jqxTree('ensureVisible', item); // not working
    			}
    			return false; // break the loop
    		};
    	});
    }
    
    

    The item is selected but ensureVisible fails with error as follows

    
    Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'top')
        at c.<computed>.ensureVisible (jqxtree.js:8:12036)
        at Object.b.jqx.invoke (jqxcore.js:15:57011)
        at Object.b.jqx.jqxWidgetProxy (jqxcore.js:15:62073)
        at HTMLDivElement.<anonymous> (jqxcore.js:15:67978)
        at Function.each (jquery.min.js:2:3003)
        at S.fn.init.each (jquery.min.js:2:1481)
        at S.fn.init.b.fn.<computed> [as jqxTree] (jqxcore.js:15:67950)
        at HTMLLIElement.<anonymous> (Abc.js:1238:10)
        at Function.each (jquery.min.js:2:3003)
        at OpenAutoHide (Abc.js:1231:4)
    
    

    Thanks

    Autohide content disappearing problem #121598

    NormB
    Participant

    Update..
    I have modified OpenAutoHide as follows, but it does not solve the issue

    
    function OpenAutoHide(label, item) {
    	// Open the labelled auto-hide tab, check first whether already open
    	var autohides = $('.jqx-layout-group-auto-hide li');
    	$.each(autohides, async function() {
    		if(this.innerText === label) {
    			if(!$(this).hasClass('jqx-ribbon-item-selected')) { // It is not already open
    				$(this).click();
    				await waitFor(function() {
    					return $(this).hasClass('jqx-ribbon-item-selected');
    				});
    				if(item) { SelectAndMakeVisible(item); }
    			} else if(item){ // Already open
    				SelectAndMakeVisible(item);
    			}
    			return false; // break the loop
    		};
    	});
    }
    
    function SelectAndMakeVisible(item) {
    	var tree = $('#tunesTree');
    	tree.jqxTree('selectItem', item);
    	tree.jqxTree('ensureVisible', item); // not working
    }
    

    Norman


    Martin
    Participant

    Hello Norman,

    Could you please provide us a Fiddle example of your set up? It can be with hardcoded data for the tree so we can just reproduce the behavior.
    Thank you!

    Best Regards,
    Martin Yotov

    jQWidgets team
    https://www.jqwidgets.com

    Autohide content disappearing problem #121600

    NormB
    Participant

    Martin,
    I am trying to create a Fiddle – I have not created one before, though it seems fairly straightforward.

    my attempt so far

    I am struggling though to get my hard coded data to show in the tree. My “data” array is as it normally comes back from my first Ajax call and all I do is just put tree.jqxTree({ source: data});. I don’t really understand why it does not work directly with a hard coded array, but clearly it does not – do I need a dataAdapter? – if so please advise how to do it. I did look at the Json data example, but was unsure what represented the parentid in my case.

    Once I have the file list showing, I shall need to populate the “items” in at least one file node in order to replicate my problem.

    Thanks for the help so far.

    Norman


    Martin
    Participant

    Hello Norman,

    You have to declare the TunesTreeInit function before passing it to the layout, otherwise it was not invoked at all.
    I have updated the Example.

    Best Regards,
    Martin Yotov

    jQWidgets team
    https://www.jqwidgets.com


    NormB
    Participant

    Update..
    There were some obvious errors, but still cannot get filelist showing

    Latest attempt


    NormB
    Participant

    Oops – I did not spot your reply so I shall now continue to try and recreate my problem – ignore the last update.
    Norman


    NormB
    Participant

    Martin

    Fiddle example now available here

    After selecting “Run”, expand any tree item to populate it (does not matter which, same data added)

    Now click the “Menu” tab and the “Show” button.

    This will trigger a call to “OpenAutoHide” and then “SelectAndMakeVisible”.

    You should then find that the item “Whiskers” has been selected but not made visible (you need to scroll down to it).

    No error is reported in the console, but the alert ‘Whiskers should now be visible’ does not appear, suggesting it crashed (if you put an alert immediately before the call to “ensureVisible” it shows)

    In my own environment I call a wait function to make sure that the autohide has opened before calling these functions but that does not seem to work in the fiddle – you can see the commented out lines.

    Norman

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.