Print Page - full page layout using "fit:true" switch

Title: full page layout using "fit:true" switch - bottom margin problem [resolved]
Post by: andyj on July 25, 2013, 04:11:48 AM

I am using the layout component that I want to automatically fit to the full size of the page.
This works fine as follows:

Code:

<body>
	<div class="easyui-layout" data-options="fit:true">

But if I want a small margin around the layout there is a problem with the bottom margin (padding)

Code:

<body style="padding:10px">
	<div class="easyui-layout" data-options="fit:true">

I correctly have 10px of padding top, left and right but at the bottom the layout continues 10px below the bottom of the screen.

Any suggestions on how to resolve?

Title: Re: full page layout using "fit:true" switch - bottom margin problem
Post by: stworthy on July 25, 2013, 07:59:17 AM

One solution to solve this issue is to define the 'box' css and apply it to <body>.

Code:

<style>
	.box{
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		-ms-box-sizing:border-box;
		-o-box-sizing:border-box;
		box-sizing:border-box;
	}
</style>
<body class="box" style="padding:10px;">
	<div class="easyui-layout" fit="true">
	</div>
</body>

Title: Re: full page layout using "fit:true" switch - bottom margin problem
Post by: andyj on July 25, 2013, 08:08:43 AM

Spot on.
Works like a dream.
Thank you again. ;D

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: andyj on July 25, 2013, 04:11:48 AM