본문 바로가기

Developer

Sharepoint 2010 (Fixed Width Master Pages with JQuery) 넓이 고정 시키기

 

SharePoint 2010의 경우 기본적으로 전체 넓이를 가지고 갑니다.

오늘은 전체 넓이 말고 고정 사이즈를 주고 핸들링 하는 방법에 대해서 작성합니다.

 

해당 문서는 제가 임의로 작업한 부분이라. 명확하지 않습니다.

그리고 s4-workspace 이름을 변경하여 작업하였으며, 이는 Sharepoint가 재대로 사이즈 조정을 못할 수 있음을 알려 드립니다.

 

적용 화면은 아래와 같습니다.

 

V4.master 파일을 보시면 기본적으로 아래와 같은 구조입니다.

	<body>
		<form runat="server" onsubmit="if (typeof(_spFormOnSubmitWrapper) != 'undefined') {return _spFormOnSubmitWrapper();} else {return true;}">
			...
			<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
				Ribbon Contents...
			</div>
			<div id="s4-workspace">
				body Contents....
			</div>
			...
		</form>
	</body>
</html>

 

위 구조에서 제가 변경한 부분은 아래와 같습니다.

css

body #ui-page-wrapper{ margin: 0px; padding: 0px; width: 900px; }
body #s4-workspace-wrapper { width:100%; overflow: auto; background-color:#999999; }
body #s4-ribbonrow-wrapper, body #s4-workspaces{text-align:left;  width: 900px; margin: 0px; padding: 0px; }
body #s4-workspaces { overflow-y:hidden; overflow-x:auto; background-color:#FFFFFF; }
body div#s4-workspace-wrapper div#s4-workspaces div#s4-titlerow { width:100%; }

javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script language="javascript" type="text/javascript">

	$(document).ready(function () {
		$("div#s4-ribbonrow-wrapper").append($("body div#s4-workspace-wrapper div#s4-workspaces div#s4-titlerow"));

		setTimeout(fnSetWorkspaceHeight, 100);

		$(window).resize(function () {
			var ribbonRow = $("body div#s4-ribbonrow-wrapper");
			var workspaceRow = $("div#s4-workspace-wrapper");

			var docHeight = $("div#s4-workspaces").height() + ribbonRow.height();

			if (docHeight < $(window).height())
				$("body div#s4-workspaces").css("margin-left", "0px");
			else
				$("body div#s4-workspaces").css("margin-left", "16px");

			workspaceRow.height(($(window).height() - ribbonRow.height()) + "px");
		});
	});

	function fnSetWorkspaceHeight() {
		var ribbonRow = $("body div#s4-ribbonrow-wrapper");
		var workspaceRow = $("div#s4-workspace-wrapper");

		workspaceRow.height(($(window).height() - ribbonRow.height()) + "px");
		var docHeight = $("div#s4-workspaces").height() + ribbonRow.height();

		if (docHeight < $(window).height())
			$("body div#s4-workspaces").css("margin-left", "0px");
		else
			$("body div#s4-workspaces").css("margin-left", "16px");
	}
</script>

html

	<body>
		<form runat="server" onsubmit="if (typeof(_spFormOnSubmitWrapper) != 'undefined') {return _spFormOnSubmitWrapper();} else {return true;}">
			......
			<table width="100%">
				<tr>
					<td align="center" style="background-color:#999999;">
						<div id="s4-ribbonrow-wrapper">
							<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
								Ribbon Contents...
							</div>
						</div>
						<div id="s4-workspace-wrapper">
							<div id="s4-workspaces" class="s4-nosetwidth">
								body Contents....
							</div>
						</div>
					</td>
				</tr>
			</table>
			......
		</form>
	</body>
</html>

 

위 코드는 본문이 길어질 경우 스크롤 바가 생기는데 해당 스크롤 바를 문서의 좌측으로 정렬하기 위함입니다.

스크립트에서 s4-titlerow를 s4-ribbonrow-wrapper에 넣는 이유는 s4-titlerow가 본문영역에 있기 때문에 깨지는 것을 방지하기 위함입니다.

 

가로 스크롤의 경우에는 본문의 컨텐츠를 사이즈에 맞게 만들어야 되며, 일정과 같은 목록에서는 약간의 수정이 더 필요한 상태입니다.

 

전체 소스는 아래와 같습니다.

 

이상입니다.