jQWidgets Forums

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

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

Author

jqTabs growing 2 pixels in width at each tab selection Posts

August 28, 2014 at 1:59 pm jqTabs growing 2 pixels in width at each tab selection #58900

Participant

Hi!

jqTabs growing 2 pixels in width at each tab selection if it is style=”width:100%; height:100%;” inside an HTML TABLE (with same style).
The table is required as i plan to put things above the tabs.
Could anyone please help me how to bypass this?

See jsFiddle: http://jsfiddle.net/6b37gjud/

Source (i don’t know how long the jsFiddle link will be alive)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>GMW</title>
	<link rel="stylesheet" type="text/css" href="./Content/styles/jqx.base.css" />
	<style>
		html, body {
			font-size: .85em;
			font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
			color: #232323;
			background-color: #fff;
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

		.wh100 {
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
	</style>
	<script src="./Scripts/jquery-1.11.1.min.js"></script>
	<script src="./Scripts/jqx-all.js"></script>
</head>
<body>
	<table class="wh100">
		<tr>
			<td>
				<div id="MainTabs" class="wh100">
					<ul>
						<li>A</li>
						<li>B</li>
					</ul>
					<div id="ATab" style="overflow:hidden;">
						<table id="ATable" style="width:100%; height:100%; border:2px solid blue;">
							<tr>
								<td valign="top" style="background-color:red;">A <span id="ASpan"></span></td>
							</tr>
						</table>
					</div>
					<div id="BTab" style="overflow:hidden;">
						<table id="BTable" style="width:100%; height:100%; border:2px solid blue;">
							<tr>
								<td valign="top" style="background-color:red;">B <span id="BSpan"></span></td>
							</tr>
						</table>
					</div>
				</div>
			</td>
		</tr>
	</table>
	<script>
		var MainTabs = $("#MainTabs");

		var main_tabs = ["A", "B"];

		$(document).ready(function()
		{
			MainTabs.jqxTabs({ width: "100%", height: "100%" });
			LoadTab(0);
			MainTabs.on("selected", function(event)
			{
				LoadTab(event.args.item);
			});
		});

		function LoadTab(tabindex)
		{
			main_tabs.forEach(function(value)
			{
				var tb = document.getElementById(value + "Table");
				$("#" + value + "Span").text(tb.offsetWidth + " x " + tb.offsetHeight);
			});
		}
	</script>
</body>
</html>

August 29, 2014 at 5:56 am jqTabs growing 2 pixels in width at each tab selection #58918

Peter Stoev

Keymaster

Hi YaniMan,

Your <table id="ATable" style="width:100%; height:100%; border:2px solid blue;"> represents a HTML Element with 100% + 4px width and height.
because as far as I know from the CSS Box model, the width which you set is the content’s width and so is valid for the height i.e to resolve the issue on your side, you will either have to set the box-sizing of your HTML Elements or calculate the size which you want to set to your content and set it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 29, 2014 at 7:06 am jqTabs growing 2 pixels in width at each tab selection #58924

YaniMan

Participant

Hi Peter,

I updated the jsFiddle code (http://jsfiddle.net/6b37gjud/2/), also addded box sizing to the wh100 class and the problem is solved.
Thank you very much, i was struggling with it for two days now.

Author

Posts

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

You must be logged in to reply to this topic.