jQWidgets Forums

Tagged: docking, docking windows, javascript docking

This topic contains 9 replies, has 3 voices, and was last updated by wavetrex 12 years, 1 month ago.

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

Author

Docking Window Size > 600px Posts

July 24, 2012 at 1:27 pm Docking Window Size > 600px #6291

binfch

Participant

Hi there

I have a docking window that needs to be taller than 600px. But there seems to be a limit of 600px somewhere (max-height)!?
How can I size the window > 600px?

Here’s my test code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
    <style type="text/css">
        .windowTitle {
          float: left;
        }
        .windowIcon {
          position: absolute;
          right: 5px;
        }
        #contactContainer{
        }
    </style>
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>   
    <script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = 'classic';
                $('#contactContainer').jqxDocking({ 
                    theme: theme,
                    width: 450,
                    windowsOffset: 0
                });
                $('#contactContainer').jqxDocking('hideAllCloseButtons');
                $('#contactContainer').jqxDocking('hideAllCollapseButtons');
                $('#contactContainer').jqxDocking('pinWindow', 'contactWindow');
                $("#contactTooltip").jqxTooltip({ width: 250, theme: 'classic', showHtml: true });
                var element = $('#contactIcon');
                $("#contactTooltip").jqxTooltip('add', element, '<b>Contacts</b>');
            });
        </script>
        <div id="contactContainer">
            <div id="contactPanel">
                <div id="contactWindow" style="height: 650px;">
              
                    <div>
                        <span class="contactTitle">Contact</span>
                        <img id="contactIcon" class="windowIcon" src="img/info.gif" width="16" height="16"/>
                        <div id='contactTooltip'></div>
                    </div>
                    <div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Thanks & cheers,
Peter

July 24, 2012 at 2:39 pm Docking Window Size > 600px #6300

milen

Participant

Hi Peter,

That restriction comes from the fact that jqxWindow’s maxHeight property is 600px by default. You can change it by using the ‘setWindowProperty’ method of jqxDocking.

For example:

$('#contactContainer').jqxDocking('setWindowProperty', 'contactWindow', 'maxHeight', 1000);
$('#contactContainer').jqxDocking('setWindowProperty', 'contactWindow', 'height', 1000);

Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 30, 2012 at 6:28 am Docking Window Size > 600px #6397

binfch

Participant

Hello Milen

Thanks for your feedback. Sorry about that but I still am having some issues with this. The window heigth (800px) itself is OK now but its content is rendered with a scrollbar. I’d like to get rid of the scrollbar:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
    <style type="text/css">
        .windowTitle {
            float: left;
        }
        .windowIcon {
            position: absolute;
            right: 5px;
        }
        .jqx-window-content-classic {
            padding: 0px;
            background-color: #e3e3e3;
        }
        .jqx-docking-panel-classic {
            margin: 0px;
        }
        #contactContent{
            height: 800px;
        }
    </style>
    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>   
    <script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = 'classic';
                $('#contactContainer').jqxDocking({ 
                    theme: theme,
                    width: 450,
                    windowsOffset: 0
                });
                $('#contactContainer').jqxDocking('hideAllCloseButtons');
                $('#contactContainer').jqxDocking('hideAllCollapseButtons');
                $('#contactContainer').jqxDocking('pinWindow', 'contactWindow');
                
$('#contactContainer').jqxDocking('setWindowProperty', 'contactWindow', 'maxHeight', 800);
$('#contactContainer').jqxDocking('setWindowProperty', 'contactWindow', 'height', 800);
                $("#contactTooltip").jqxTooltip({ width: 250, theme: 'classic', showHtml: true });
                var element = $('#contactIcon');
                $("#contactTooltip").jqxTooltip('add', element, '<b>Contacts</b>');
            });
        </script>
        <div id="contactContainer">
            <div id="contactPanel">
                <div id="contactWindow">
              
                    <div>
                        <span class="contactTitle">Contact</span>
                        <img id="contactIcon" class="windowIcon" src="img/info.gif" width="16" height="16"/>
                        <div id='contactTooltip'></div>
                    </div>
                    <div>
                        <div id="contactContent">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Thanks and cheers,
Peter

July 30, 2012 at 6:39 am Docking Window Size > 600px #6400

milen

Participant

Hi Peter,

To get rid of ScrollBars, I suppose that you can set the overflow to hidden of the window’s content container.

                   <div style='overflow: hidden;'>
                        <div id="contactContent">
                        </div>
                    </div>

Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 30, 2012 at 6:50 am Docking Window Size > 600px #6401

binfch

Participant

Hi Milen

Thx for the answer. Indeed , this hides the scrollbar.
However the real problem I am having is that the “contactContent” DIV is not shown/rendered 800px height (same size as the window). it is shown only 600px hight (with a scrollbar).

Thx & cheers,
Peter

July 31, 2012 at 8:29 am Docking Window Size > 600px #6420

milen

Participant

Hi Peter,

I suppose that you will need to set the ‘contactContent’s height to 100% because the provided code will change the size of the window, but the content could have any size.

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.classic.css" type="text/css" />
    <style type="text/css">
        .windowTitle {
            float: left;
        }
        .windowIcon {
            position: absolute;
            right: 5px;
        }
        .jqx-window-content-classic {
            padding: 0px;
            background-color: #e3e3e3;
        }
        .jqx-docking-panel-classic {
            margin: 0px;
        }
        #contactContent{
            height: 800px;
        }
    </style>
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = 'classic';
                $('#contactContainer').jqxDocking({
                    theme: theme,
                    width: 450,
                    windowsOffset: 0
                });
                $('#contactContainer').jqxDocking('hideAllCloseButtons');
                $('#contactContainer').jqxDocking('hideAllCollapseButtons');
                $('#contactContainer').jqxDocking('pinWindow', 'contactWindow');
                $('#contactContainer').jqxDocking('setWindowProperty', 'contactWindow', 'maxHeight', 1000);
                $('#contactContainer').jqxDocking('setWindowProperty', 'contactWindow', 'height', 1000);
                $("#contactTooltip").jqxTooltip({ width: 250, theme: 'classic', showHtml: true });
                var element = $('#contactIcon');
                $("#contactTooltip").jqxTooltip('add', element, '<b>Contacts</b>');
            });
        </script>
        <div id="contactContainer">
            <div id="contactPanel">
                <div id="contactWindow">
                    <div>
                        <span class="contactTitle">Contact</span>
                       <div id='contactTooltip'></div>
                    </div>
                    <div>
                        <div style="height: 100%; background: blue;" id="contactContent">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 31, 2012 at 8:56 am Docking Window Size > 600px #6422

binfch

Participant

Thx Milen for the feedback

However this does not seem to work

Pls check the following screenshot that illustrates my problem:
http://www.binf.ch/jqwshot1.png

Thx & cheers,
P.

July 31, 2012 at 9:12 am Docking Window Size > 600px #6423

milen

Participant

It works with the version that I use – jQWidgets 2.3.1.

Here’s the screenshot:

Regards,
Milen Ivanov

jQWidgets Team
http://www.jqwidgets.com

July 31, 2012 at 9:16 am Docking Window Size > 600px #6424

binfch

Participant

Hi Milen

I just did download 2.3.1 -> There it works!!

Thanks & cheers,
Peter

February 12, 2013 at 5:53 am Docking Window Size > 600px #15035

wavetrex

Participant

Hi !
I know this thread is a bit old, but I noticed a problem:

jqxDocking(‘setWindowProperty’) method does not appear to exist in the documentation:

http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdocking/jquery-docking-api.htm

Does the function actually exist just not mentioned in the doc, or it has been removed since the version that was active when this thread was created.
Thanks for any clarification.

Author

Posts

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

You must be logged in to reply to this topic.