jQWidgets Forums

Tagged: docking, jqxDocking, jqxsplitter, splitter

This topic contains 6 replies, has 3 voices, and was last updated by mullai.b 11 years, 9 months ago.

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

Author

Docking Window is not properly aligned within splitter Posts

August 13, 2013 at 2:59 pm Docking Window is not properly aligned within splitter #26753

mullai.b

Participant

<!DOCTYPE html>

<head>

even the layout of your page. Each window which is part of jqxDocking can be dragged around the Web page,

docked into docking zones, collapsed into a minimized state, expanded or pinned.” />

<title id=’Description’>jqxDocking represents a widget which enables you to manage and

layout multiple windows on a web page.</title>

<style>

html, body

{

width: 100%;

height: 100%;

overflow: hidden;

}

</style>

$(document).ready(function () {

var source = [

‘JavaScript Certification – Welcome to our network’,

‘Business Challenges via Web take a part’,

‘jQWidgets better web, less time. Take a tour’,

‘Facebook – you have 7 new notifications’,

‘Twitter – John Doe is following you. Look at his profile’,

‘New videos, take a look at YouTube.com’

];

var theme = getDemoTheme();

$(‘#docking’).jqxDocking({ theme: theme, orientation: ‘horizontal’, width: ‘100%’, height: ‘100%’, mode: ‘docked’ });

$(‘#docking’).jqxDocking(‘disableWindowResize’, ‘window1’);

$(‘#docking’).jqxDocking(‘disableWindowResize’, ‘window2’);

$(‘#docking’).jqxDocking(‘disableWindowResize’, ‘window3’);

$(‘#docking’).jqxDocking(‘disableWindowResize’, ‘window4’);

$(‘#calendar’).jqxCalendar({ theme: theme, width: 180, height: 180 });

$(‘#newsTbs’).jqxTabs({ theme: theme, width: 310, height: 181, selectedItem: 1 });

$(‘#listbox’).jqxListBox({ source: source, theme: theme, width: 310, height: 181 });

$(‘#zodiak’).jqxPanel({ theme: theme, width: 312, height: 180 });

$(‘#verticalsplitter’).jqxSplitter({

width: ‘99%’,

height: ‘98%’,

orientation: ‘vertical’,

panels: [

{ size: “10%”, min: “5%” },

{ size: ‘90%’, min: “5%”, collapsible: false}]

});

</script>

</head>

Nav Panel 1

</div>

<div>

Date and Time

</div>

</div>

<h3 style=”text-align: center; color: #787878;”>Sunny</h3>

</div>

Mo: 23 °C<br />

To 25 °C<br />

We: 27 °C

</div>

<div>

News

</div>

<li>World</li>

<li>Local</li>

<li>Sports</li>

</ul>

<div>

</div>

<span style=”font-size: 11px;”>Microsoft is set to get a little more pushy ensuring

you have an up-to-date browser and will automatically update Internet Explorer…

</div>

<div>

</div>

<span style=”font-size: 11px;”>The High Court has dismissed a challenge to laws that

require immigrant spouses to be able to speak English in order to live in the UK…

</div>

<div>

</div>

<span style=”font-size: 11px;”>British number one Elena Baltacha says Judy Murray is

a “fantastic” appointment as Great Britain’s new Fed Cup captain… <span style=”font-size: 8px;”>(BBC)</span> </span>

</div>

<div>

Zodiac

</div>

</div>

<span style=”font-size: 11px”>Individuals born under the zodiac sign of Leo are very

good looking and have a healthy physique, with a broad forehead. Leo are very intelligent,

extremely courageous, love their freedom and live by their own rules. Indulgence

and extravagance is like second nature to them and they love to… </span>

</div>

<div>

E-mail

</div>

</div>

</body>

</html>

August 14, 2013 at 6:40 am Docking Window is not properly aligned within splitter #26781

Dimitar

Participant

Hello mullai.b,

Please try enclosing your docking div (with id=”docking”) in another div.

Best Regards,
Dimitar

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

August 14, 2013 at 9:09 am Docking Window is not properly aligned within splitter #26792

mullai.b

Participant

Hi Dimitar,

I enclosed id=”docking” within another div. But still the docking panels are not aligned on page load.

 <div>
         <div style='border:1px solid red'> Code.. to... be placed...</div>
</div>

With Regards,
Mullai Malar

August 14, 2013 at 10:06 am Docking Window is not properly aligned within splitter #26795

mullai.b

Participant

Please find the code here,

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta name='keywords' content='jqxDocking, jQuery Docking, jQWidgets, Default Functionality' />
    <meta name='description' content='jqxDocking is a widget which helps you to control and manage multiple windows and 
    even the layout of your page. Each window which is part of jqxDocking can be dragged around the Web page, 
    docked into docking zones, collapsed into a minimized state, expanded or pinned.' />
    <title id='Description'>jqxDocking represents a widget which enables you to manage and
        layout multiple windows on a web page.</title>
    <link rel='stylesheet' href='../../jqwidgets/styles/jqx.base.css' type='text/css' />
    <script type='text/javascript' src='../../scripts/jquery-1.9.1.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/jqxdatetimeinput.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxcalendar.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxtooltip.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxtabs.js'></script>
    <script type='text/javascript' src='../../jqwidgets/globalization/globalize.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxdocking.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxlistbox.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxscrollbar.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxbuttons.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxpanel.js'></script>
    <script type='text/javascript' src='../../jqwidgets/jqxsplitter.js'></script>
      <style>
        html, body
        {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
    <script type='text/javascript'>
        $(document).ready(function () {
            var source = [
                    'JavaScript Certification - Welcome to our network',
                    'Business Challenges via Web take a part',
                    'jQWidgets better web, less time. Take a tour',
                    'Facebook - you have 7 new notifications',
                    'Twitter - John Doe is following you. Look at his profile',
                    'New videos, take a look at YouTube.com'
            ];
            var theme = getDemoTheme();
            $('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: '100%', height: '100%', mode: 'docked' });
            $('#docking').jqxDocking('disableWindowResize', 'window1');
            $('#docking').jqxDocking('disableWindowResize', 'window2');
            $('#docking').jqxDocking('disableWindowResize', 'window3');
            $('#docking').jqxDocking('disableWindowResize', 'window4');
            $('#docking').jqxDocking('hideAllCloseButtons');
            $('#docking').jqxDocking('showAllCollapseButtons');
            $('#calendar').jqxCalendar({ theme: theme, width: 180, height: 180 });
            $('#newsTbs').jqxTabs({ theme: theme, width: 310, height: 181, selectedItem: 1 });
            $('#listbox').jqxListBox({ source: source, theme: theme, width: 310, height: 181 });
            $('#zodiak').jqxPanel({ theme: theme, width: 312, height: 180 });
           
            $('#verticalsplitter').jqxSplitter({
                width: '99%',
                height: '98%',
                orientation: 'vertical',
                panels: [
                   { size: "10%", min: "5%" },
                   { size: '90%', min: "5%", collapsible: false}]
            });
        });
    </script>
</head>
<body class='default'>
<div id='PropertiesConatiner' style='width: 100%; height: 100%;'>
    <div id='verticalsplitter' >
        <div style='border:1px solid blue'>
        
        Nav Panel 1
            
        </div>
        <div id='dockingConatiner'>
         <div id='docking' style='border:1px solid red'>
                <div id='DockPanel1'>
                    <div id='window1' style='height: 220px;'>
                        <div>
                            Date and Time
                        </div>
                        <div style='overflow: hidden;'>
                            <div id='calendar' style='float: left; margin-right: 10px;'>
                            </div>
                            <h3 style='text-align: center; color: #787878;'>Sunny</h3>
                            <div style='float: left; margin-left: 30px; text-align: center;'>
                                <img src='../../images/sun-icon.png' alt='Sunny' />
                            </div>
                            <div style='text-align: left; margin-left: 5px; margin-top: 10px; font-size: 10px; float: right; margin-right: 20px;'>
                                Mo: 23 °C<br />
                                To 25 °C<br />
                                We: 27 °C
                            </div>
                        </div>
                    </div>
                    <div id='window2' style='height: 220px'>
                        <div>
                            News
                        </div>
                        <div style='overflow: hidden;'>
                            <div id='newsTbs'>
                                <ul style='margin-left: 30px'>
                                    <li>World</li>
                                    <li>Local</li>
                                    <li>Sports</li>
                                </ul>
                                <div>
                                    <div style='padding: 3px; margin: 10px; width: 150px; height: 84px; float: left;'>
                                        <img src='../../images/news_ie6.jpg' alt='IE6' title='IE6' />
                                    </div>
                                    <span style='font-size: 11px;'>Microsoft is set to get a little more pushy ensuring
                                    you have an up-to-date browser and will automatically update Internet Explorer…
                                    <span style='font-size: 8px;'>(BBC)</span> </span>
                                </div>
                                <div>
                                    <div style='padding: 3px; margin: 10px; width: 144px; height: 81px; float: left;'>
                                        <img src='../../images/local.jpg' alt='Tennis' title='Tennis' />
                                    </div>
                                    <span style='font-size: 11px;'>The High Court has dismissed a challenge to laws that
                                    require immigrant spouses to be able to speak English in order to live in the UK…
                                    <span style='font-size: 8px;'>(BBC)</span> </span>
                                </div>
                                <div>
                                    <div style='padding: 3px; margin: 10px; width: 130px; height: 73px; float: left;'>
                                        <img src='../../images/tennis.jpg' alt='Tennis' title='Tennis' />
                                    </div>
                                    <span style='font-size: 11px;'>British number one Elena Baltacha says Judy Murray is
                                    a “fantastic' appointment as Great Britain's new Fed Cup captain… <span style='font-size: 8px;'>(BBC)</span> </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id='DockPanel2' >
                    <div id='window3' style='height: 220px'>
                        <div>
                            Zodiac
                        </div>
                        <div style='overflow: hidden;'>
                            <div id='zodiak'>
                                <div style='padding-right: 20px;'>
                                    <div style='padding: 3px; width: 150px; height: 110px; float: left; margin: 10px;'>
                                        <img src='../../images/leo.jpg' alt='Leo' title='Leo' />
                                    </div>
                                    <h3 style='text-align: center; color: #787878;'>Leo</h3>
                                    <span style='font-size: 11px'>Individuals born under the zodiac sign of Leo are very
                                good looking and have a healthy physique, with a broad forehead. Leo are very intelligent,
                                extremely courageous, love their freedom and live by their own rules. Indulgence
                                and extravagance is like second nature to them and they love to… </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id='window4' style='height: 220px;'>
                        <div>
                            E-mail
                        </div>
                        <div style='overflow: hidden;'>
                            <div id='listbox'>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
     </div>
</body>
</html>

August 14, 2013 at 10:38 am Docking Window is not properly aligned within splitter #26800

mullai.b

Participant

Hi Dimitar,

I enclosed id=”docking” within another div. But still the docking panels are not aligned on page load. Please find the above code.
And i notice on collapse on splitter Panel 1, The docking window “Date and Time” and “News” ie, Column 1 occupies more space when compared to Column 2. I need all windows ie, 4 windows to take uniform width. How can i achieve this.

With Regards,
Mullai Malar

August 16, 2013 at 12:00 pm Docking Window is not properly aligned within splitter #26967

Peter Stoev

Keymaster

Hi Dimitar and Mullai Malar,

Let me help with this one:

The initialization of the Splitter should be above the initialization of the widgets inside the Splitter i.e move the

            $('#verticalsplitter').jqxSplitter({
                width: '99%',
                height: '98%',
                orientation: 'vertical',
                panels: [
                   { size: "10%", min: "5%" },
                   { size: '90%', min: "5%", collapsible: false }]
            });

code above the Docking’s initialization.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 19, 2013 at 6:33 am Docking Window is not properly aligned within splitter #27097

mullai.b

Participant

Hi Peter ,

Thank you. the solution works.

Best Regards,
Mullai Malar

Author

Posts

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

You must be logged in to reply to this topic.