jQWidgets Forums

jQuery UI Widgets › Forums › Layouts › Docking › Error & Question

Tagged: ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Error & Question Posts
  • May 11, 2012 at 2:26 pm Error & Question #4089

    binfch
    Participant

    Hi there

    I tried to have 6 windows dockable (2 rows of 3 windows).

    -> This works fine in Chrome 19. But in IE 9 and FF 12 I get the windows displayed in 2 rows of 2 windows and in 2 rows of 1 window .

    Question: The vertical spacing and the horizontal spacing between windows is not the same -> Is there a way to adjust that?

    Thanks & cheers,
    Peter

    May 11, 2012 at 3:12 pm Error & Question #4091

    Peter Stoev
    Keymaster

    Hi Peter,

    Could you provide the HTML + JS code which reproduces the issue? Did you set the ‘width’ property of the jqxDocking?

    The following code below creates 2 rows of 3 windows.

    <!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.7.2.min.js"></script>
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#docking').jqxDocking({ orientation: 'horizontal', width: 500  });
            });
        </script>
    </head>
    <body class='default'>
            <div id="docking">
                <div id="panel0">
                    <div id="window0" style="height: 70px; ">
                        <div>
                            Title 1</div>
                        <div>
                            Content 1.</div>
                    </div>
                    <div id="window1" style="height: 70px; ">
                        <div>
                            Title 2</div>
                        <div>
                            Content 2.</div>
                    </div>
                </div>
                <div id="panel1">
                     <div id="window2" style="height: 70px; ">
                        <div>
                            Title 3</div>
                        <div>
                            Content 3.</div>
                    </div>
                     <div id="window3" style="height: 70px; ">
                        <div>
                            Title 4</div>
                        <div>
                            Content 4.</div>
                    </div>
                </div>
                <div id="panel3">
                    <div id="window4" style="height: 70px; ">
                        <div>
                            Title 5</div>
                        <div>
                            Content 5.</div>
                    </div>
                    <div id="window5" style="height: 70px; ">
                        <div>
                            Title 6</div>
                        <div>
                            Content 6.</div>
                    </div>
                </div>
            </div>
    </body>
    </html>

    To change the spacing between the docking container panels, you can set a Margin.

    For example:

    $("#panel1, #panel2").css('margin-left', '-7px');

    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.