jQuery UI Widgets › Forums › Layouts › Panel and Responsive Panel › A DIV with width:100% in the Panel
This topic contains 10 replies, has 5 voices, and was last updated by Peter Stoev 10 years, 2 months ago.
-
Author
-
Hello!
I hope this problem has a simpler solution than it looks like to me after a couple of hours of trying. 🙂
I have a jqPanel and I want to append a sequence of DIVs with some content inside. They should all take 100% of the Panel’s width and should be layed out vertically.
I’ve tried with width:inherit, width:100%, etc. no success. The DIV always takes just enough space to cover its contents.
Something like this:
$("#ers_pnl_updates").jqxPanel('append', '<div style="width:inherit; padding: 3px; margin:5px; border-style:solid; border-width:1px; border-color:#aaaaaa;">some content</div>');
The jqPanel is the best container to use, as I don’t know the number of DIVs in advance, and Panel provides a scroll bar if needed…
Any ideas?
Aleks.
Hello Aleks,
Before appending any divs, you should have the following line of code:
$("#panelContentjqxWidget").width("100%");
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Unfortunatelly, this does not help. Here is the corresponding, simplyfied code (I use table instead of DIV):
$("#ers_pnl_updates").jqxPanel({ width: '100%', height: 200, theme: PMD.theme }); $("#ers_pnl_updates").width("100%"); // build the revision history part $.each(updates, function(index, value) { // some code here var html = '<table style="margin-top:2px; margin-left:4px; border-style:solid; border-width:1px; border-color:#aaaaaa;"><tr><td style="padding: 3px; margin:5px; font-style:italic; color:#444444;">' + value.responsible_name + ' added on ' + value.revision_date + '<td></tr><tr><td style="padding: 3px; margin:5px;">' + value.notes + '<td></tr><tr><td style="padding: 3px; margin:5px; font-size:90%; color:#444444;">' + 'Probability: <span style="color:' + color_prob + ';">' + value.probability + '</span>, ' + 'Impact: <span style="color:' + color_impact + ';">' + value.impact + '</span>, ' + 'Magnitude: <span style="color:' + color_magnitude + ';">' + value.magnitude + '</span></td></tr></table>'; $("#ers_pnl_updates").jqxPanel('prepend', html); };
Hi aorlic,
Let me clarify – panelContentjqxWidget is not the id of the widget, but of an inner element. You should have the code exactly as shown in my previous post:
$("#panelContentjqxWidget").width("100%");
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar!
I got it, now it works… I must admit I don’t like very much this solution, as it deals with the widget’s internal implementation and should be invisible to developers.
Shouldn’t this be imlemented through the widht property of the widget itself?
Regards,
Aleksandar.
Hi Aleksandar,
This behaviour will be improved in upcoming versions of jQWidgets.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar, please extend your solution, show the jqpanel constructor with that line of code you mentioned before.
Regards from Argentina, Berton.-
Hello berton,
Here is how to append a div in the panel’s content. The width of the div is automatically set to 100% of that of the panel.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="../../scripts/demos.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript"> $(document).ready(function () { // Create jqxPanel $("#jqxWidget").jqxPanel({ width: 350, height: 350 }); $("#appendDivButton").click(function () { $("#jqxWidget").jqxPanel('append', '<div>jQWidgets is a comprehensive and innovative widget library built on top of the jQuery JavaScript Library. It empowers developers to deliver professional, cross-browser compatible web applications, while significantly minimizing their development time. jQWidgets contains more than 40 UI widgets and is one of the fastest growing JavaScript UI frameworks on the Web.</div>'); }); }); </script> </head> <body class='default'> <button id="appendDivButton"> Append div</button> <br /> <div id='jqxWidget' style="font-size: 13px; font-family: Verdana;"> <h3> jQWidgets Description</h3> </div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you very much for your help! i can solve the problem now.
Best Regards, Berton.-
As said above i am able to do $(“#jqxDockPanel”).width(“80%”); for width but when i do the same thing for height it is not working any suggestions ??
$(“#jqxDockPanel”).height(“80%”);
Hi Sanivarapu,
If you want to set height of something in percentages, make sure that its container’s height is set as well. Because HTML Element with height set to 80% within a container which has height set to “auto” ( this is by default ) would result in no change. I would suggest you to look at the Fluid Size demos on our web site or if you wish look at the mobile demos, too.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.