jQWidgets Forums

jQuery UI Widgets › Forums › Layouts › Docking › Width 100% Too Wide

Tagged: ,

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Width 100% Too Wide Posts
  • January 8, 2014 at 5:57 pm Width 100% Too Wide #47575

    vespagym
    Participant

    When creating a jqxDocking widget and setting the width to 100%, the generated dimensions are a few pixels too wide on the right side. I have other HTML elements on the page set to 100%, and the docking widget border extends beyond them. Removing the width: ‘100%’ causes the docking widget to be the correct width to line up with the other elements, but causes other issues with panel/window resizing when resizing the browser. How is it possible to remove the few extra pixels?

    $('#docking').jqxDocking({ width: '100%', theme: 'classic', orientation: 'horizontal', mode: 'docked', cookies: true, cookieOptions: { expires: 365 } });

    January 8, 2014 at 7:18 pm Width 100% Too Wide #47583

    Peter Stoev
    Keymaster

    Hi vespagym,

    A possible solution is to remove the Padding and Margin of your Page’s html and body tags.

    Best Regards,
    Peter Stoev

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

    January 8, 2014 at 8:01 pm Width 100% Too Wide #47585

    vespagym
    Participant

    Here’s a bare bones code that illustrates the issue:

    <html>
<head>
<link rel="stylesheet" href="js/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="js/jqwidgets/styles/jqx.classic.css" type="text/css" />
<script src="js/jquery/jquery-1.10.2.min.js" language="javascript" type="text/javascript"></script>
<script src="js/jqwidgets/jqxcore.js" language="javascript" type="text/javascript"></script>
<script src="js/jqwidgets/jqxdocking.js" language="javascript" type="text/javascript"></script>
<script src="js/jqwidgets/jqxwindow.js" language="javascript" type="text/javascript"></script>
<script>
$(document).ready(function () {
    $('#docking').jqxDocking({ width: '100%', theme: 'classic', orientation: 'horizontal', mode: 'docked' });
    $('#docking').jqxDocking('showAllCollapseButtons');
    $('#docking').jqxDocking('hideAllCloseButtons');
});
</script>
</head>
<body>
	<table style="width: 100%; border: 1px solid black;">
		<tr><td>Table1</td></tr>
	</table>
	<div id="docking" style="border: 1px solid black;">
		<div id="col1" style="width: 50%;">
			<div>
				<div>Header1</div>
				<div>Content1</div>
			</div>
		</div>
	</div>
</body>
</html>
    January 9, 2014 at 6:42 am Width 100% Too Wide #47603

    Peter Stoev
    Keymaster

    Hi vespagym,

    Remove the Padding and Margin of your HTML page. In addition, you add a Border which with the default browser’s box-sizing means that your DIV tag will have 100% width + 2PX so you will have to remove that, too.

    Best Regards,
    Peter Stoev

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

    January 9, 2014 at 6:58 pm Width 100% Too Wide #47642

    vespagym
    Participant

    Thanks, Peter. The info about box sizing was very helpful. I was able to get everything in line using the following CSS on the docking div:

    -webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;    
box-sizing: border-box;
    January 9, 2014 at 9:19 pm Width 100% Too Wide #47646

    Peter Stoev
    Keymaster

    Hi vespagym,

    My idea was actually to just remove the Border Style which you have set in the HTML markup and use the border: none; style instead.

    Best Regards,
    Peter Stoev

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

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.