그리드 가로스크롤 추가

src/main/webapp/app/oper/OPER01010.html

@@ -5,11 +5,11 @@
 				<h2 class="pull-left itp_det_tit"><i class="glyphicon glyphicon-chevron-right"></i><i class="glyphicon glyphicon-chevron-right"></i> <strong>사용자관리</strong></h2>
 				<div class="pull-right itp_cicon">
 					<button type="button" id="ITP_BTN_OPER01010_SRH" class="btn btn-success btn-md SEB" style="display: inline-block;"><i class="glyphicon glyphicon-search"></i>조회</button>
-					<button type="button" id="ITP_BTN_OPER01010_MODIFY" class="btn btn-success btn-sm UPB" style="display: inline-block;"><i class="glyphicon "></i>&nbsp;&nbsp;수정&nbsp;&nbsp;</button>
+					<button type="button" id="ITP_BTN_OPER01010_MODIFY" class="btn btn-success btn-md UPB" style="display: inline-block;"><i class="glyphicon "></i>수정</button>
 					<button type="button" id="ITP_BTN_OPER01010_NEWREG" class="btn btn-primary btn-md NEB" style="display: inline-block;"><i class="glyphicon "></i>신규등록</button>
-					<button type="button" id="ITP_BTN_OPER01010_DELETE" class="btn btn-danger btn-sm DEB"><i class="glyphicon "></i>&nbsp;&nbsp;삭제&nbsp;&nbsp;</button>
-					<button type="button" id="ITP_BTN_OPER01010_SAVE" class="btn btn-success btn-sm SAB"><i class="glyphicon "></i>&nbsp;&nbsp;저장&nbsp;&nbsp;</button>
-					<button type="button" id="ITP_BTN_OPER01010_CANCELLIST" class="btn btn-warning btn-sm PRB"><i class="glyphicon "></i>&nbsp;&nbsp;취소/목록&nbsp;&nbsp;</button>
+					<button type="button" id="ITP_BTN_OPER01010_DELETE" class="btn btn-danger btn-md DEB"><i class="glyphicon "></i>삭제</button>
+					<button type="button" id="ITP_BTN_OPER01010_SAVE" class="btn btn-success btn-md SAB"><i class="glyphicon "></i>저장</button>
+					<button type="button" id="ITP_BTN_OPER01010_CANCELLIST" class="btn btn-warning btn-md PRB"><i class="glyphicon "></i>취소/목록</button>
 				</div>
 			</div>
 			<div class="itp_det_in">

src/main/webapp/css/style.css

@@ -91,7 +91,7 @@ a, button {outline:none !important; text-decoration:none !important;}
 
 /* ITP_WRAPPER */
 #ITP_WRAPPER {width:100%; height:100%; min-width:1400px;}
-#ITP_CONTENT_WRAPPER {width:100%;}
+#ITP_CONTENT_WRAPPER {width:100%; height:96%;}
 #ITP_OVERLAY {position:fixed; display:none; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background:rgba(250,250,250,.8); z-index:1060;}
 
 /* ITP_LOGIN */
@@ -150,7 +150,11 @@ a, button {outline:none !important; text-decoration:none !important;}
 #ITP_HEADER .itp_menu a {color:#000; font-size:13px; text-decoration:none;}
 #ITP_HEADER .itp_out {width:70px; height:30px;  float:left; border:1px solid #333; line-height: 28px; background:#fff; margin-top:10px; border-radius: 10px; padding:0 4px;}
 #ITP_HEADER .itp_out a {padding:8.4px; color:#000; font-size:11px; text-decoration:none;}
-#ITP_HEADER .itp_tabs {position:relative; z-index:100; transition:all .25s ease; float:right; width:calc(100% - 240px);}
+
+#ITP_HEADER #ITP_TAB_BAR.itp_open_tab {width:99.9%;}
+/* #ITP_HEADER.itp_open_tab .itp_nav {visibility:visible;}
+#ITP_HEADER.itp_open_tab .itp_nav::-webkit-scrollbar{display:none;} */
+#ITP_HEADER .itp_tabs {position:relative; z-index:100; transition:all .25s ease; float:right; width:calc(100% - 238px);}
 #ITP_HEADER .itp_tabs .nav-tabs {padding:15px 4px 0 15px; background:#fff;}
 #ITP_HEADER .itp_tabs .nav-tabs > li a {border:1px solid #ddd; background:#f5f5f5; font-size:12px; color:#666; padding:10px 13px 7px 15px; margin-right:6px; outline:none;}
 #ITP_HEADER .itp_tabs .nav-tabs > li a i.glyphicon-remove {font-size:10px; margin-left:4px; cursor:pointer;}
@@ -159,13 +163,15 @@ a, button {outline:none !important; text-decoration:none !important;}
 
 /* ITP_SIDEBAR */
 #ITP_SIDEBAR {width:0px; float:left; margin-left:-2px; height:calc(100vh - 68px); background:#ddd; transition:all .25s ease; border-style:solid; border-color:#ddd; border-width:0 1px 1px 1px;}
-#ITP_SIDEBAR.itp_open_nav {width:240px;}
+#ITP_SIDEBAR.itp_open_nav {width:240px; height:100%;}
 #ITP_SIDEBAR .itp_nav {list-style:none; margin:0; padding:0; height:100%; overflow-y:scroll; overflow-x:hidden; visibility:hidden;}
 #ITP_SIDEBAR.itp_open_nav .itp_nav {visibility:visible;}
+#ITP_SIDEBAR.itp_open_nav .itp_nav::-webkit-scrollbar{display:none;}
 #ITP_SIDEBAR .itp_nav.panel-group .panel+.panel {margin-top:0;}
 #ITP_SIDEBAR .itp_nav .panel-heading {padding:0;}
 #ITP_SIDEBAR .itp_nav .panel-title {line-height:1.1; border-bottom:1px solid #ddd;}
-#ITP_SIDEBAR .itp_nav .panel-title a {font-size:14px; display:block; padding:13px 15px; color:#333;}
+#ITP_SIDEBAR .itp_nav .panel-title a {font-size:16px; display:block; padding:13px 15px; color:#333;}
+#ITP_SIDEBAR .itp_nav .panel-title a:hover{background:#bbb; color:#fff;}
 #ITP_SIDEBAR .itp_nav .panel-title a .glyphicon {font-size:12px;}
 #ITP_SIDEBAR .itp_nav .panel-default {margin-bottom:0; border:none;}
 #ITP_SIDEBAR .itp_nav * {border-radius:0; border-width:1px 0 1px 0;}
@@ -182,8 +188,8 @@ a, button {outline:none !important; text-decoration:none !important;}
 #ITP_SIDEBAR .itp_nav .itp_svgs li a .itp_tt {float:left;}
 
 /* ITP_CONTAINER */
-#ITP_CONTAINER {height:calc(100vh - 69px); padding:8px; transition:all .25s ease; float:left; width:calc(100% - 240px);background:#fff;}
-#ITP_CONTAINER.itp_open_conts {padding-left:8px; width:100%;}
+#ITP_CONTAINER {height:calc(100vh - 100px); padding:8px; transition:all .25s ease; float:left; width:calc(100% - 240px);background:#fff;}
+#ITP_CONTAINER.itp_open_conts {padding-left:8px; width:99.9%;}
 #ITP_CONTAINER .itp_contents {background:#fff; height:100%;}
 #ITP_CONTAINER .itp_contents .itp_sec {height:100%;}
 #ITP_CONTAINER .itp_contents .itp_cont {display:table; width:100%; height:100%;}
@@ -243,7 +249,8 @@ a, button {outline:none !important; text-decoration:none !important;}
 #ITP_CONTAINER .itp_detail .itp_det_head .itp_det_tit {font-size:20px; margin:0; padding:0; line-height:42px;}
 #ITP_CONTAINER .itp_detail .itp_det_head .itp_det_tit .glyphicon {color:#F0831E; margin-right:4px;}
 
-#ITP_CONTAINER .itp_detail .itp_det_in {padding:0px 20px 15px 20px; height:calc(100vh - 127px); overflow-y:scroll;}
+#ITP_CONTAINER .itp_detail .itp_det_in {padding:0px 20px 15px 20px; height:calc(100vh - 180px); overflow-y:scroll;}
+#ITP_CONTAINER .itp_detail .itp_det_in::-webkit-scrollbar{display:none;}
 #ITP_CONTAINER .itp_detail .itp_cicon {line-height:32px; height:32px;}
 #ITP_CONTAINER .itp_detail .itp_cicon .btn-default {color:#fff; background-color:rgb(109, 110, 114); border-color:rgb(109, 110, 114);}
 #ITP_CONTAINER .itp_detail .itp_cicon .itp_store {display:inline-block; vertical-align:middle; font-size:13px; margin-right:10px;}

src/main/webapp/css/ui.jqgrid-bootstrap.css

@@ -180,6 +180,7 @@ div.tablediv > .table-bordered {
 	margin: 0;
 	padding:0;
 	text-align:left;
+	overflow-x:auto !important;
 }
 .ui-jqgrid .ui-jqgrid-btable {
 	table-layout: fixed;
@@ -195,7 +196,7 @@ div.tablediv > .table-bordered {
 }
 @media all and (-ms-high-contrast: none) {
 	.ui-jqgrid .ui-jqgrid-btable tbody tr.jqgrow td {
-		overflow: hidden;
+		overflow: auto;
 		padding-right: 2px;
 	}
 }

src/main/webapp/js/app/config.js

@@ -160,6 +160,7 @@ require([
 		//$('#ITP_OVERLAY').toggle();
 		$('#ITP_SIDEBAR').toggleClass('itp_open_nav');
 		$('#ITP_CONTAINER').toggleClass('itp_open_conts');
+		$('#ITP_TAB_BAR').toggleClass('itp_open_tab');
 		itp_fn_fire_window_resize();
 
 		/*
@@ -1797,7 +1798,7 @@ function itp_fn_grid_load_complete(data, gridId, paging, rn, menuId, isSrh, empt
 		}
 
 		if (shrinkToFit) {
-			$(gridId + '_list').find('.ui-jqgrid .ui-jqgrid-bdiv').css('overflow-x', 'hidden');
+			$(gridId + '_list').find('.ui-jqgrid .ui-jqgrid-bdiv').css('overflow-x', 'auto');
 		} else {
 			$(gridId + '_list').find('.ui-jqgrid .ui-jqgrid-bdiv').css('overflow-x', 'auto');
 		}

src/main/webapp/js/app/oper/ITP_OPER01010.js

@@ -342,6 +342,8 @@ let pageObj = {
 				gridId: gridId,
 				colModel: gridColModel.detail,
 				param: param,
+				autowidth: true,
+				shrinkToFit :false,
 				url: DOMAIN + API_USERAUTH_GRID_LIST,
 				multiselect: (this.mode !== 'VIEW'),
 				loadComplete: function(data) {
@@ -416,6 +418,8 @@ let listObj = {
 				param: param,
 				url: DOMAIN + API_DETAIL_GRID_LIST,
 				pager: OPER01010_GRID_PAGER,
+				autowidth: true,
+				shrinkToFit :false,
 				onCellSelect: function(rowId, cellIdx, cellValue) {
 					var cm = $(this).jqGrid('getGridParam', 'colModel');
 					var colNm = cm[cellIdx].name;
@@ -665,6 +669,8 @@ let createObj = {
 			var option = {
 				gridId: this.gridId,
 				colModel: gridColModel.detail,
+				autowidth: true,
+				shrinkToFit :false,
 				data: gridData,
 				multiselect: true,
 				loadComplete: function(data) {

src/main/webapp/js/app/oper/ITP_OPER02010.js

@@ -429,6 +429,8 @@ let listObj = {
 				gridId: OPER02010_GRID_ID,
 				colModel: this.colModel,
 				param: param,
+			    autowidth:true,    
+		        shrinkToFit:false,
 				url: DOMAIN + NTICE_DETAIL_GRID_LIST,
 				pager: OPER02010_GRID_PAGER,
 				onCellSelect: function(rowId, cellIdx, cellValue) {

src/main/webapp/main.html

@@ -67,7 +67,7 @@
 				</div>
 			</div>
 			<!-- 상단 탭 부분 -->
-			<div class="itp_tabs">
+			<div id="ITP_TAB_BAR" class="itp_tabs">
 				<ul class="nav nav-tabs itp_tab_list" role="tablist">
 					<li class="active"><a href="#ITP_TAB_SUMMARY" role="tab" data-toggle="tab" class="itp_tab_open">메뉴안내</a></li>
 				</ul>