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.
-
Author
-
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
Now realised I have said “pinned” and “unpinned” the wrong way round. i.e. All works fine when “unpinned”, not when “pinned.
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 YotovjQWidgets team
https://www.jqwidgets.comThanks 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
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
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
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 PeevskijQWidgets team
https://www.jqwidgets.comThank 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 thecontentContainer: '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
Update..
I have modified OpenAutoHide as follows, but it does not solve the issuefunction 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
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 YotovjQWidgets team
https://www.jqwidgets.comMartin,
I am trying to create a Fiddle – I have not created one before, though it seems fairly straightforward.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
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 YotovjQWidgets team
https://www.jqwidgets.comUpdate..
There were some obvious errors, but still cannot get filelist showingOops – I did not spot your reply so I shall now continue to try and recreate my problem – ignore the last update.
NormanMartin
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
-
AuthorPosts
You must be logged in to reply to this topic.