jQuery UI Widgets Forums Layouts DockPanel positioning jqxDockPanel relative to container

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • d_l
    Member

    I’m trying to position an instance of jqxDockPanel
    by placing jqxDockPanel inside a parent div container and then using this css

    #container
    { position: relative; top: 100px; left: 0px; } /* contains “jqxDockPanel” */

    #jqxDockPanel
    { position: absolute; top: 100px; left: 50px; }

    However the jqxDockPanel is invisible and only renders in browser when I disable this css.

    Does this css conflict with jqxDockPanel? In particular position: absolute?


    Peter Stoev
    Keymaster

    Hi,

    The CSS does not conflict with the jqxDockPanel. However, make sure to set “width” and “height” properties of jqxDockPanel.

    Example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdockpanel.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#jqxDockPanel").css('position', 'absolute');
    $("#jqxDockPanel").css('left', '100px');
    $("#jqxDockPanel").css('top', '50px');
    $("#jqxDockPanel").jqxDockPanel({ width: 300, height: 210});
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget' style="width: 300px; height: 600px; font-size: 13px; font-family: Verdana;">
    <div id='jqxDockPanel'>
    <div id='first' dock='left' style='background: #486974;'>
    First Div</div>
    <div id='second' dock='top' style='height: 100px; background: #368ba7;'>
    Second Div</div>
    <div id='third' dock='right' style='background: #df7169;'>
    Third Div</div>
    <div id='fourth' style='background: #a73654;'>
    Fourth Div</div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.