jQWidgets Forums

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

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

Author

Splitter in 100% div does not function correctly Posts

June 3, 2012 at 2:06 pm Splitter in 100% div does not function correctly #4548

Member

I have created this test case to illustrate the problem of using a splitter inside a div that adjusts to use the remaining space. This test case raises multiple issues: 1) the splitter assumes a very large width with the div containing jqx-splitter-panel-wrapper set to width: 158332px; 2) the splitter height is also too high, 3) note the placement of the content for the second panel. Please advise.

Vertical Splitter

$(document).ready(function () {
var theme = ”;
$(‘#mainSplitter’).jqxSplitter({ width: ‘100%’, height: ‘100%’, theme: theme, panels: [{ size: ‘40%’ }, { size: ‘60%’}] });
});

html {
height:100%;
width: 100%;
}
body {
height:100%;
width: 100%;
}
#container {
height:100%;
width: 100%;
}
#header {
width: 100%;
height: 44px;
background-color: #333;
}
#leftTabs {
height: 100%;
width: 44px;
background-color: #333;
}
#rightPanel {
height:100%;
width: 100%;
}
#rightPanelContainer {
height:100%;
}
#splitterContainer {
height:100%;
width: 100%;
}

Panel 1

Panel 2

June 3, 2012 at 2:06 pm Splitter in 100% div does not function correctly #4549

arudmik

Member

I will send you the code via email

June 3, 2012 at 2:38 pm Splitter in 100% div does not function correctly #4550

Peter Stoev

Keymaster

We are unable to reproduce the issue with the provided information. Please send us a small sample which will illustrate the problem, so we will be able to test and debug with the specific application scenario.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 3, 2012 at 9:04 pm Splitter in 100% div does not function correctly #4557

Peter Stoev

Keymaster

Thank you about the Splitter’s sample and for the feedback.

Here’s the sample’s code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="keywords" content="jQuery Splitter, Splitter Widget, Splitter, jqxSplitter" />
<meta name="description" content="This page demonstrates splitter's events" />
<title id='Description'>Vertical 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="../../scripts/gettheme.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            $('#mainSplitter').jqxSplitter({ width: '100%', height: '100%', theme: theme, panels: [{ size: '40%' }, { size: '60%'}] });
        });
    </script>
<style type="text/css">
html {
	height:100%;
	width: 100%;
}
body {
	height:100%;
	width: 100%;
}
#container {
	height:100%;
	width: 100%;
}
#header {
	width: 100%;
	height: 44px;
	background-color: #333;
}
#leftTabs {
	height: 100%;
	width: 44px;
	background-color: #333;
}
#rightPanel {
	height:100%;
	width: 100%;
}
#rightPanelContainer {
	height:100%;
}
#splitterContainer {
	height:100%;
	width: 100%;
}
</style>
</head>
<body class='default'>
<table id="container" cellpadding="0" cellspacing="0" border="0" width="100%">
  <tr>
    <td>
    	<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
        	<tr>
            	<td id="leftTabs" width="44px"><img src="../../images/progress1.jpg" width="47" height="20"></td>
            </tr>
       </table>
    </td>
    <td id="rightPanel">
      <table id="rightPanelContainer" cellpadding="0" cellspacing="0" border="0" width="100%">
        <tr>
          <td id="header">&nbsp;</td>
        </tr>
        <tr>
          <td id="splitterContainer">
              <div id="mainSplitter">
                <div class="splitter-panel"> Panel 1</div>
                <div class="splitter-panel"> Panel 2</div>
              </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

I was able to reproduce the reported issue and created a new work item about it.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.