jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Mish 12 years, 5 months ago.

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

Author

Splitters on the tabs Posts

January 25, 2013 at 11:54 am Splitters on the tabs #14196

Mish

Member

Hi, all

Could somebody clarify what is wrong in my code.
When I drag splitter on the first tab the widgets on second tab get the wrong size.

Steps to reproduce:
1. Switch to the second tab
2. Drag splitter
3. Switch to first tab. Panels on the first tab are corrupted

If you resize the browser window all become ok.

My workaround is to set new width and trigger resize

var plus = true;
$(\’#tabs\’).on(\’selected\’, function (event) {
var w = $(\’body\’).width();
if (plus) { plus = !plus; w +=1; }
else w -= 1;
$(\’body\’).width(w).resize();
});

Here is my code:


<!DOCTYPE html>
<html lang="en">
<head>
	<title id='Description'>DEFO</title>
	<link rel="stylesheet" href="/static/jq/jqwidgets/styles/jqx.base.css" type="text/css"/>
	<link rel="stylesheet" href="/static/jq/jqwidgets/styles/jqx.classic.css" type="text/css"/>
	<script type="text/javascript" src="/static/jq/scripts/jquery-1.9.0.js"></script>
	<script type="text/javascript" src="/static/jq/scripts/gettheme.js"></script>
	<script type="text/javascript" src="/static/jq/jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="/static/jq/jqwidgets/globalization/jquery.global.js"></script>
	<script type="text/javascript" src="/static/jq/jqwidgets/jqxtabs.js"></script>
	<script type="text/javascript" src="/static/jq/jqwidgets/jqxsplitter.js"></script>
	<script>
		$(document).ready(function () {
			var theme = 'classic';//getTheme();
			$("#tabs").jqxTabs({ width: 700, height: 500, showCloseButtons: true, theme: theme });
			$('#split1').jqxSplitter(
			{
				height: '100%',
				width: '100%',
				orientation:'vertical',
				theme:theme,
				panels:[
					{size:'30%'},
					{size:'60%'}
				]
			});
			$('#split2').jqxSplitter(
			{
				height: '100%',
				width: '100%',
				orientation:'vertical',
				theme:theme,
				panels:[
					{size:'60%'},
					{size:'30%'}
				]
			});
		});
	</script>
</head>
<body class='default'>
<div id='main' >
	<div id="tabs">
		<ul style='margin-left: 2px;'>
			<li><div id="hdr_tab1">1</div></li>
			<li><div id="hdr_tab2">2</div></li>
		</ul>
		<div id='tab2'>
			<div id='split1'>
				<div id='part11' style="border: 3px solid #000000; margin: 5px">aaaaaaaa</div>
				<div id='part12' style="border: 3px solid #000000; margin: 5px">bbbbbbbb</div>
			</div>
		</div>
		<div id='tab1'>
			<div id='split2'>
				<div id='part21' style="border: 3px solid #000000; margin: 5px">cccccccc</div>
				<div id='part22' style="border: 3px solid #000000; margin: 5px">dddddddd</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

January 25, 2013 at 1:28 pm Splitters on the tabs #14203

Peter Stoev

Keymaster

Hi Mish,

The following sample: integration.htm demonstrates how to use jqxTabs with other widgets.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 25, 2013 at 4:03 pm Splitters on the tabs #14209

Mish

Member

Hi Peter

In your example integration.htm there is a similar error

Please do the following steps:
1. Switch to tab “NASDAQ…”
2. Return to tab “US Indexes”
3. Change the browser window size
4. Switch to the tab “NASDAQ”. The chart is collapsed!

I think this error has the same nature as error with splitters. Probably the dimensions of widgets on the invisibl tabs are calulated incorrectly

January 27, 2013 at 8:30 am Splitters on the tabs #14232

Mish

Member

Peter, also please pay attention to attributes ‘height’, ‘width’ in html.
When I inspect html I see values like ‘height: 128.39999997615814px’. Is it “by design”?
May be the root cause is in incorect rounding of height and width of elements ?

Thanks

Author

Posts

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

You must be logged in to reply to this topic.