positioning jqxDockPanel relative to container - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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

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

Author

positioning jqxDockPanel relative to container Posts

April 6, 2013 at 4:45 pm positioning jqxDockPanel relative to container #18712

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?

April 8, 2013 at 4:52 am positioning jqxDockPanel relative to container #18778

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/

Author

Posts

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

You must be logged in to reply to this topic.