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.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • A DIV with width:100% in the Panel #13637

    aorlic
    Member

    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.

    A DIV with width:100% in the Panel #13699

    Dimitar
    Participant

    Hello Aleks,

    Before appending any divs, you should have the following line of code:

                $("#panelContentjqxWidget").width("100%");

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    A DIV with width:100% in the Panel #13711

    aorlic
    Member

    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);
    };
    A DIV with width:100% in the Panel #13795

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    A DIV with width:100% in the Panel #13813

    aorlic
    Member

    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.

    A DIV with width:100% in the Panel #13844

    Dimitar
    Participant

    Hi Aleksandar,

    This behaviour will be improved in upcoming versions of jQWidgets.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    A DIV with width:100% in the Panel #51978

    berton
    Participant

    Hi Dimitar, please extend your solution, show the jqpanel constructor with that line of code you mentioned before.

    Regards from Argentina, Berton.-

    A DIV with width:100% in the Panel #52008

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    A DIV with width:100% in the Panel #52081

    berton
    Participant

    Thank you very much for your help! i can solve the problem now.

    Best Regards, Berton.-

    A DIV with width:100% in the Panel #58682

    Sanivarapu
    Participant

    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%”);

    A DIV with width:100% in the Panel #58693

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.