jQuery UI Widgets › Forums › Dialogs and Notifications › Window › Problem with using Widgets
Tagged: dialog jqwidget
This topic contains 6 replies, has 2 voices, and was last updated by norathem 10 years, 2 months ago.
-
Author
-
Hey there,
I’m new to jQ Widges and after testing some Widges on theire own I now tried to use several at the same time and failed 😀The Idea is to have a Window, containing a Splitter and on the left part of the Splitter I want to have a NavigationBar with a Tree as one of its contents.
Its working so far but it got some issues and I hope that you can help me to fix them:
1. I seems like it dont accept some sizes for the window. Like it dossnt matter if I enter 1000px or 1500px for the width.
2. The resizing of the Window dossnt work either as I can only make it smaller, not bigger.
3. In the tree the Node User is expanded by default but it dossnt show any content before closing and reopening it again.
4. Also the tree has some scrolling issues as you can’t scroll far enough to see all items.Heres my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <link rel="stylesheet" href="../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../jqwidgets/scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxtree.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxnavigationbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxsplitter.js"></script> <script type="text/javascript" src="../jqwidgets/jqwidgets/jqxwindow.js"></script> <script type="text/javascript"> $(document).ready(function () { //Create Window $("#jqxwindow").jqxWindow({ width: '1300px', height: '700px', showCollapseButton: 'true', resizable: 'false' }); // Create Splitter $("#jqxSplitter").jqxSplitter({ width: '100%', height: '100%'}); // Create jqxNavigationBar $("#jqxnavigationbar").jqxNavigationBar({ width: 'auto', height: 'auto', expandMode: 'multiple'}); // Create jqxTree $('#jqxTree').jqxTree({ height: 'auto', width: 'auto' }); $('#jqxTree').bind('select', function (event) { var htmlElement = event.args.element; var item = $('#jqxTree').jqxTree('getItem', htmlElement); document.getElementById('label1').innerText = item.label; //alert(item.label); }); }); </script></head><body> <div id='jqxwindow'> <div>Header</div> <div> <div id='jqxSplitter'> <!--First Splitter Section--> <div> <h1>NavigationBar Test</h1> <div id='jqxnavigationbar'> <div> <!--Header--> Filter </div> <div> <!--Content--> Content 1 <br> Content 2 </div> <div> <!--Header--> Navigation </div> <div> <!--Content--> <div id='jqxTree'> <ul> <li item-selected='true' item-expanded='true'>User <ul> <li>Info <ul> <li>Info 1</li> <li>Info 2</li> </ul> </li> <li>Documents <ul> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> </ul> </li> <li>More Documents <ul> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> <li>Document 1</li> <li>Document 2</li> </ul> </li> </ul> </li> </ul> </div> </div> </div> </div> <!--Second Splitter Section--> <div> <h1>Editor</h1> <h3 id='label1'>nothing clicked so far ...</h3> </div> </div> </div> </div></body></html>
- This topic was modified 10 years, 2 months ago by Peter Stoev. Reason: Moved to Window Forum
Hi,
The window has default maximum and minimum size set. If you want to use bigger than 600×600 size, you need to set the maxWidth and maxHeight properties, too.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Stupid me, should have thought about that .. thanks anyways.
Any idea about the Tree issues?
Hi,
There are no settings “auto” for width and height. These are not supported. You can use either Fixed size or Percentage Size.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/I tried using 100% instead of auto before but sadly it doesn’t work neither.
The problem is that the second Navigation Tab (the on with the Tree in it) doesn’t expand correctly – it simply shows just a line of roughly 1px.I also tried to do the initialization of the tree inside the “initContent function” of the Navigation Bar but it didn’t made a difference.
I made some more Testing with a simple Tree without any other Widgets and can narrow it down to the following:
If I give the height in pixels it works fine – but since I dont know the exact hight its not really a solution
If I give the height in percentage it simply showes a 1px line no matter what.
If I use auto for the high it works, but it dosn’t show a scrollbar when the items extend the visible area.Ok the problem seems to be that im using ” expandMode: ‘multiple’ ” in the Navigation Bar and it doesn’t work with the Tree
-
AuthorPosts
You must be logged in to reply to this topic.