EasyUI Forum
May 07, 2024, 09:35:55 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
EasyUI Forum > General Category > EasyUI for jQuery > full page layout using "fit:true" switch - bottom margin problem [resolved]
Pages: [1]
« previous next »
  Print  
Author Topic: full page layout using "fit:true" switch - bottom margin problem [resolved]  (Read 9733 times)
andyj
Jr. Member
**
Posts: 57



View Profile
« 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?
« Last Edit: July 25, 2013, 08:08:57 AM by andyj » Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 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>
Logged
andyj
Jr. Member
**
Posts: 57



View Profile
« Reply #2 on: July 25, 2013, 08:08:43 AM »
Spot on.
Works like a dream.
Thank you again.  Grin
Logged
Pages: [1]
  Print  
« previous next »
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!