jQWidgets Forums

Tagged: docking, jqxDocking, jqxwindow, window

This topic contains 4 replies, has 2 voices, and was last updated by pepe 10 years, 2 months ago.

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

Author

resizing panels Posts

March 17, 2015 at 6:04 pm resizing panels #68772

pepe

Participant

Good afternoon, I leave the question I have.
Panel1 width is 25% and contains the WINDOW1 panel2 and width is 75% and contains ventana2. Is it possible to move the ventana2 to panel1 the width of the panels will change and panel1 pass to measure wide panel2 75% and 25% measured pass?

How I can do to make the docking measure high 100%?

<!DOCTYPE html>
<html lang=”en”>
<head>
<title id=’Description’>jQuery jqxDocking Sample</title>
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.classic.css” type=”text/css” />
<script type=”text/javascript” src=”../../scripts/jquery-1.11.1.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”>
$(document).ready(function () {
// Create jqxDocking
$(“#docking”).jqxDocking({
orientation: ‘horizontal’,
mode: ‘docked’,
width: ‘100%’,
height: ‘100%’,
windowsOffset: 7,
theme: ‘classic’
});
});
</script>
</head>
<body class=’default’>
<div id=”docking”>
<div id=”panel1″ style=”width: 25%; height: 100%”>
<div id=”window1″ style=”” >
<div>Header 1</div>
<div>Content 1</div>
</div>
</div>
<div id=”panel2″ style=”height:100%”>
<div id=”window2″ >
<div>Header 2</div>
<div>Content 2</div>
</div>
</div>
</div>
</body>
</html>

March 18, 2015 at 12:41 pm resizing panels #68821

Nadezhda

Participant

Hello pepe,

If you want to make jqxDocking height to 100%, please, find the below example which shows how to achieve it. If window size is equal to 600px then you should increase value of ‘maxHeight’ property like in the following two lines:

$('#docking').jqxDocking('setWindowProperty', 'window1', 'maxHeight', 2000);
$('#docking').jqxDocking('setWindowProperty', 'window2', 'maxHeight', 2000);

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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">
        $(document).ready(function () {
            // Create jqxDocking
            $("#docking").jqxDocking({
                orientation: 'horizontal',
                mode: 'docked',
                width: '100%',
                height: '100%',
            });
        });
    </script>
</head>
<body class='default'>
    <div id="docking" >
        <div id="panel1" style="width: 25%;" >
            <div id="window1" style="height: 100%;">
                <div>Header 1</div>
                <div>Content 1</div>
            </div>
        </div>
        <div id="panel2">
            <div id="window2" style="height: 100%;">
                <div>Header 2</div>
                <div>Content 2</div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

March 18, 2015 at 8:07 pm resizing panels #68827

pepe

Participant

Nedezhda thanks for the response. The problem I have sulucionado height.
But my other question is that when you move the window windows do not fit the width of the panel but is the width of the fit to the width of the window.

Sorry if I repeat the questions, but I need this using a translator for translations and sometimes are not very good.

A greeting.

March 19, 2015 at 8:08 am resizing panels #68839

Nadezhda

Participant

Hi pepe,

You may try the following example. Width of panel 1 is equal to 25% and width of panel 2 is 75%. ‘maxHeight’ and ‘maxWidth’ set the maximum height and width of the windows. I hope it would be helpful.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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">
        $(document).ready(function () {
            // Create jqxDocking
            $("#docking").jqxDocking({
                orientation: 'horizontal',
                mode: 'docked',
                width: '100%',
                height: '100%',
            });
            $('#docking').jqxDocking('setWindowProperty', 'window1', 'maxHeight', 1080);
            $('#docking').jqxDocking('setWindowProperty', 'window2', 'maxHeight', 1080);
            $('#docking').jqxDocking('setWindowProperty', 'window1', 'maxWidth', 1920);
            $('#docking').jqxDocking('setWindowProperty', 'window2', 'maxWidth', 1920);

        });
    </script>
</head>
<body class='default'>
    <div id="docking" >
        <div id="panel1" style="width: 25%;" >
            <div id="window1" style="height: 100%;">
                <div>Header 1</div>
                <div>Content 1</div>
            </div>
        </div>
        <div id="panel2" style="width: 75%;">
            <div id="window2" style="height: 100%;">
                <div>Header 2</div>
                <div>Content 2</div>
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

March 20, 2015 at 10:37 am resizing panels #68893

pepe

Participant

THANKS FOR THE ANSWER NADEZHDA . A GREETING

Author

Posts

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

You must be logged in to reply to this topic.