jQuery UI Widgets › Forums › Navigation › Tree › How can I use width/height 100% size with jqxTree on fixed div..
Tagged: jqxtree
This topic contains 2 replies, has 2 voices, and was last updated by kerusia 12 years, 7 months ago.
-
Author
-
Hello, I make sample with jqxTree.
I have a question.jqxTree was displayed when attach on fixed size div,
but it don’t displayed on non-fixed div..I can’t use 100% size on jqxTree…
Can you help me?
next html is my sample codes:
<!DOCTYPE html><html><head><style type="text/css">* {margin:0; padding: 0}html, body{ margin:0; padding:0; overflow: hidden; }body { width: 100%; height: 100%;}#nm-header { position: absolute; top: 0px; left: 0px; width: 100%; height: 97px; background: #fff; overflow: hidden; border-bottom: 3px #000 solid;}#nm-content-wrapper {}#nm-content-area { position: absolute; top: 100px; left: 0px; width: 100%; bottom: 100px; background: #d2da9c; overflow: hidden;}#nm-content-left { position: absolute; top: 100px; width: 15%; bottom: 250px; background: #e2e2e2; overflow: auto;}#nm-content-state { position: absolute; bottom: 100px; width: 15%; height: 147px; background: #fff; border-top: 3px #000 solid; overflow: auto;}#nm-content-right { position: absolute; top: 100px; left: 15%; width: 85%; bottom: 100px; background: #0f0; overflow: auto;}#nm-footer { position: absolute; left: 0; width: 100%; bottom: 0px; height: 97px; background: #fff; overflow: auto; border-top: 3px #000 solid;}</style><link rel="stylesheet" href="widget/styles/jqx.base.css" type="text/css" /><script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script><script type="text/javascript" src="widget/jqxcore.js"></script><script type="text/javascript" src="widget/jqxbuttons.js"></script><script type="text/javascript" src="widget/jqxpanel.js"></script><script type="text/javascript" src="widget/jqxscrollbar.js"></script><script type="text/javascript" src="widget/jqxcheckbox.js"></script><script type="text/javascript" src="widget/jqxtree.js"></script><script type="text/javascript"> $(document).ready(function(){ // fixed : $('#jqxTree1').jqxTree({height: '500px', width: '300px'}); $('#jqxTree1').jqxTree({height: '100%', width: '100%'}); });</script></head><body> <div id="nm-header"> <h1>header</h1> </div> <div id="nm-content-left"> <div id="jqxTree1"> <ul> <li item-selected="true" item-expanded="true">AA <ul> <li>BB <ul> <li>CC <ul> <li>DD</li> </ul> </li> </ul> </li> </ul> </li> <li>EE</li> </ul> </div> </div> <div id="nm-content-state"></div> <div id="nm-content-right"></div> <div id="nm-footer"> <h1>footer</h1> </div></body></html>
Hello Kerusia,
I tried to reproduce your scenario but in my case the jqxTree is with size 100% width and height.
Please make sure you’re using the last version of jQWidgets. If you still have this issue after updating the widgets let us know.Best regards,
Minko.jQWidgets Team
http://jqwidgets.com/i tested as your answer.
It’s work very well.
Thanx 🙂
-
AuthorPosts
You must be logged in to reply to this topic.