The horizontal splitter doesn't change its size when window changes its size - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: javascript splitter, jquery splitter, splitter

This topic contains 9 replies, has 3 voices, and was last updated by Peter Stoev 12 years, 4 months ago.

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

Author

The horizontal splitter doesn't change its size when window changes its size Posts
July 12, 2012 at 1:03 am The horizontal splitter doesn't change its size when window changes its size #5859

VG
Member

Hello,
I’m trying to make flexible layout what means that the size of panels should change itself when I change the window’s size. The vertical splitter works pretty will but the horizontal splitter doesn’t want to change its size and I don’t know why.
Here is the html and code:

Top left Panel center Panel dd bottom panel

code:
$('#mainSplitter').jqxSplitter({ height: '100%', width: '100%', orientation: "horizontal", theme: theme, panels: [ { size: '10%', collapsible: true, collapsed: false, resizable: true }, { size: '80%' }, { size: '10%', max: 70}] });
$('#centerSplitter').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', theme: theme, panels: [ { size: '15%' }, { size: '70%' }, { size: '15%'}] });

The max height for the bottom panel is set up as 70 but it could be of any size if I change the window vertically. Only if I change the window horizontally (even for 1 pixel) it starts working properly.

July 12, 2012 at 1:05 am The horizontal splitter doesn't change its size when window changes its size #5860
VG
Member
Hmmm it doesn’t understand that I used the HTML and I can’t edit my post so let me try to put the html layout again:
```
    <div id="mainSplitter" style="height: 100%">
        <div>top</div>
        <div id="centerSplitter">
            <div>
                left Panel</div>
            <div>
                center Panel
            </div>
            <div>
                right
            </div>
        </div>
        <div>
            bottom panel
        </div>
    </div>
```
July 12, 2012 at 10:11 am The horizontal splitter doesn't change its size when window changes its size #5870

Peter Stoev
Keymaster

Hi VG,

Thanks for the valuable feedback! I have tested your scenario and I confirm the reported issue. I also created a work item about the issue.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 12, 2012 at 5:26 pm The horizontal splitter doesn't change its size when window changes its size #5910

VG
Member

Hello Peter!
Thanks for the response. Does it mean that we will have the fix in the near future?

July 13, 2012 at 9:40 am The horizontal splitter doesn't change its size when window changes its size #5944

Peter Stoev
Keymaster

Yes. Changing the vertical size of the browser’s window will affect the Splitter’s layout when the splitter’s size is set in percentages. That fix will be available in the next release.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 6, 2012 at 11:14 am The horizontal splitter doesn't change its size when window changes its size #6613

Namrata
Member

Hello Peter!
Can you let me know when will be your next release regarding jqsplitter

August 6, 2012 at 3:59 pm The horizontal splitter doesn't change its size when window changes its size #6632

Peter Stoev
Keymaster

Hi Namrata,

The latest version is already up. This topic is regarding a previous version. If you have an issue, please post your code here and we’ll try to reproduce it locally.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 7, 2012 at 5:37 am The horizontal splitter doesn't change its size when window changes its size #6655

Namrata
Member

Hello Peter,

I have also the same issue when i set the splitter’s size in percentages it is not fixed with my browser layout.

$(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, panels: [{ size: ‘10%’ }, { size: ‘90%’}] });
$(‘#rightSplitter’).jqxSplitter({ width: ‘90%’, height: ‘100%’, orientation: ‘horizontal’, panels: [{ size: 400, collapsible: false }, { size: 100}] });

left Panel

August 7, 2012 at 5:47 am The horizontal splitter doesn't change its size when window changes its size #6659
Namrata
Member
I can’t edit my post so let me try to put the html layout again:
```
<div id='mainSplitter'>
      <div>left panel</div>
       <div id='rightSplitter'>
         <div>top</div>
         <div>bottom</div>
     </div>
</div>
```
August 7, 2012 at 8:28 pm The horizontal splitter doesn't change its size when window changes its size #6667
Peter Stoev
Keymaster
Hi Namrata,

I have prepared a sample with jQWidgets 2.3.1 and here’s the full code:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
    <meta name="description" content="This page demonstrates 4 columns splitter" />
    <title id='Description'>This page demonstrates 4 columns splitter.
    </title>
    <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="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', panels: [{ size: '20%' }, { size: '80%'}] });
            $('#rightSplitter').jqxSplitter({  height: '100%', orientation: 'horizontal', panels: [{ size: '80%', collapsible: false }, { size: '20%' }] });
        });
    </script>
    <style type="text/css">
        html, body
        {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="mainSplitter">
        <div>
            Left Panel</div>
        <div id="rightSplitter">
            <div>
                Top-Right Panel</div>
            <div>
                Bottom-Right Panel</div>
        </div>
    </div>
</body>
</html>
```
Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

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

You must be logged in to reply to this topic.