Compare commits

...

1 Commits

Author SHA1 Message Date
2d35acae40 견적/수주 팝업 폼 레이아웃 및 그리드 UX 개선
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-03 11:22:02 +09:00
3 changed files with 69 additions and 60 deletions

View File

@@ -38,6 +38,9 @@
}
/* ===== 팝업 폼 전체 너비 확장 ===== */
body, html {
overflow-x: hidden;
}
section.business_popup_min_width {
padding: 0 !important;
margin: 0 auto !important;
@@ -45,17 +48,20 @@
width: calc(100% - 8px) !important;
border: none !important;
box-shadow: none !important;
overflow-x: hidden;
}
#EntirePopupFormWrap {
width: 100% !important;
margin: 5px 0 0 0 !important;
padding: 0 5px 10px 5px !important;
box-sizing: border-box;
overflow-x: auto;
}
/* ===== 품목 그리드 컬럼 리사이즈 ===== */
#EntirePopupFormWrap > table {
width: 100% !important;
table-layout: fixed;
}
#itemListTable {
table-layout: fixed;
@@ -137,11 +143,11 @@
}
});
var dragging = false;
var startX = 0;
var startWidthL = 0;
var startWidthR = 0;
var $colL, $colR, $resizerEl;
var dragging = false;
var startX = 0;
var startWidthL = 0;
var startTableWidth = 0;
var $colL, $resizerEl;
var rafId = null;
$(document).on('mousedown', '#itemListTable .col-resizer', function(e) {
@@ -153,11 +159,10 @@
var colIdx = $resizerEl.parent().index();
$colL = $cols.eq(colIdx);
$colR = $cols.eq(colIdx + 1);
startWidthL = $colL[0].getBoundingClientRect().width;
startWidthR = $colR[0].getBoundingClientRect().width;
startX = e.clientX;
startWidthL = $colL[0].getBoundingClientRect().width;
startTableWidth = $table[0].getBoundingClientRect().width;
startX = e.clientX;
$resizerEl.addClass('is-resizing');
$table.addClass('col-resizing');
@@ -169,12 +174,11 @@
if (rafId) return;
rafId = requestAnimationFrame(function() {
rafId = null;
var delta = e.clientX - startX;
var newLeft = startWidthL + delta;
var newRight = startWidthR - delta;
if (newLeft < 40 || newRight < 40) return;
$colL.css('width', newLeft + 'px');
$colR.css('width', newRight + 'px');
var delta = e.clientX - startX;
var newLeft = startWidthL + delta;
if (newLeft < 40) return;
$colL.css('width', newLeft + 'px');
$table.css('width', (startTableWidth + delta) + 'px');
});
});
@@ -1704,7 +1708,7 @@
</colgroup>
<tr>
<td>
<div style="max-height:400px; overflow-y:auto;">
<div style="width:100%; max-height:400px; overflow-y:auto; overflow-x:auto;">
<table class="pmsPopuptable" id="itemListTable">
<colgroup>
<col width="3%" /> <!-- 번호 -->

View File

@@ -38,19 +38,25 @@
}
/* ===== 팝업 폼 전체 너비 확장 ===== */
body, html {
overflow-x: hidden;
}
section.business_popup_min_width {
padding: 0 !important;
margin: 0 auto !important;
width: calc(100% - 16px) !important;
overflow-x: hidden;
}
#EntirePopupFormWrap {
width: 100% !important;
margin: 5px 0 0 0 !important;
overflow-x: auto;
}
/* ===== 품목 그리드 컬럼 리사이즈 ===== */
#EntirePopupFormWrap > table {
width: 100% !important;
table-layout: fixed;
}
#itemListTable {
table-layout: fixed;
@@ -133,11 +139,11 @@
}
});
var dragging = false;
var startX = 0;
var startWidthL = 0;
var startWidthR = 0;
var $colL, $colR, $resizerEl;
var dragging = false;
var startX = 0;
var startWidthL = 0;
var startTableWidth = 0;
var $colL, $resizerEl;
var rafId = null;
$(document).on('mousedown', '#itemListTable .col-resizer', function(e) {
@@ -149,11 +155,10 @@
var colIdx = $resizerEl.parent().index();
$colL = $cols.eq(colIdx);
$colR = $cols.eq(colIdx + 1);
startWidthL = $colL[0].getBoundingClientRect().width;
startWidthR = $colR[0].getBoundingClientRect().width;
startX = e.clientX;
startWidthL = $colL[0].getBoundingClientRect().width;
startTableWidth = $table[0].getBoundingClientRect().width;
startX = e.clientX;
$resizerEl.addClass('is-resizing');
$table.addClass('col-resizing');
@@ -165,12 +170,11 @@
if (rafId) return;
rafId = requestAnimationFrame(function() {
rafId = null;
var delta = e.clientX - startX;
var newLeft = startWidthL + delta;
var newRight = startWidthR - delta;
if (newLeft < 40 || newRight < 40) return;
$colL.css('width', newLeft + 'px');
$colR.css('width', newRight + 'px');
var delta = e.clientX - startX;
var newLeft = startWidthL + delta;
if (newLeft < 40) return;
$colL.css('width', newLeft + 'px');
$table.css('width', (startTableWidth + delta) + 'px');
});
});
@@ -2260,22 +2264,14 @@
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- 품목정보 영역 -->
<div class="form_popup_title" style="margin-top:15px;">
<span>품목정보</span>
<button type="button" id="btnAddItem" class="plm_btns" style="float:right; margin-top:-5px;">품목 추가</button>
</div>
<table class="">
<colgroup>
<col width="100%" />
</colgroup>
<tr>
<td>
<div style="max-height:300px; overflow-y:auto;">
<div id="itemGridScroll" style="width:100%; max-height:300px; overflow-y:auto; overflow-x:auto; display:block;">
<table class="pmsPopuptable" id="itemListTable">
<colgroup>
<col width="3%" /> <!-- 번호 -->
@@ -2313,9 +2309,6 @@
</tbody>
</table>
</div>
</td>
</tr>
</table>
<table class="">
<colgroup>

View File

@@ -39,6 +39,20 @@
user-select: none;
}
body, html {
overflow-x: hidden;
}
section.business_popup_min_width {
overflow-x: hidden;
}
#EntirePopupFormWrap {
overflow-x: auto;
}
#EntirePopupFormWrap > table {
width: 100%;
table-layout: fixed;
}
/* ===== 컬럼 리사이즈 핸들 ===== */
#itemListTable th,
#itemListTable td {
@@ -96,11 +110,11 @@
}
});
var dragging = false;
var startX = 0;
var startWidthL = 0;
var startWidthR = 0;
var $colL, $colR, $resizerEl;
var dragging = false;
var startX = 0;
var startWidthL = 0;
var startTableWidth = 0;
var $colL, $resizerEl;
var rafId = null;
$(document).on('mousedown', '#itemListTable .col-resizer', function(e) {
@@ -112,11 +126,10 @@
var colIdx = $resizerEl.parent().index();
$colL = $cols.eq(colIdx);
$colR = $cols.eq(colIdx + 1);
startWidthL = $colL[0].getBoundingClientRect().width;
startWidthR = $colR[0].getBoundingClientRect().width;
startX = e.clientX;
startWidthL = $colL[0].getBoundingClientRect().width;
startTableWidth = $table[0].getBoundingClientRect().width;
startX = e.clientX;
$resizerEl.addClass('is-resizing');
$table.addClass('col-resizing');
@@ -128,12 +141,11 @@
if (rafId) return;
rafId = requestAnimationFrame(function() {
rafId = null;
var delta = e.clientX - startX;
var newLeft = startWidthL + delta;
var newRight = startWidthR - delta;
if (newLeft < 40 || newRight < 40) return;
$colL.css('width', newLeft + 'px');
$colR.css('width', newRight + 'px');
var delta = e.clientX - startX;
var newLeft = startWidthL + delta;
if (newLeft < 40) return;
$colL.css('width', newLeft + 'px');
$table.css('width', (startTableWidth + delta) + 'px');
});
});
@@ -624,7 +636,7 @@
</colgroup>
<tr>
<td>
<div style="max-height:300px; overflow-y:auto;">
<div style="width:100%; max-height:300px; overflow-y:auto; overflow-x:auto;">
<table class="pmsPopuptable" id="itemListTable">
<colgroup>
<col width="3%" /> <!-- 번호 -->