Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(page-wraper): fix PageWrapper the scroll bar on the right side of… #341

Merged
merged 1 commit into from
Mar 9, 2021
Merged

fix(page-wraper): fix PageWrapper the scroll bar on the right side of… #341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 35 additions & 15 deletions src/components/Page/src/PageWrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
</template>
</PageHeader>
<div
class="m-4 overflow-hidden"
class="overflow-hidden"
:class="[`${prefixCls}-content`, contentClass]"
:style="getContentStyle"
>
Expand Down Expand Up @@ -109,21 +109,38 @@
return;
}
nextTick(() => {
const footer = unref(footerRef);
const header = unref(headerRef);
footerHeight.value = 0;
const footerEl = footer?.$el;
//fix:in contentHeight mode: delay getting footer and header dom element to get the correct height
setTimeout(() => {
const footer = unref(footerRef);
const header = unref(headerRef);
footerHeight.value = 0;
const footerEl = footer?.$el;

if (footerEl) {
footerHeight.value += footerEl?.offsetHeight ?? 0;
}
let headerHeight = 0;
const headerEl = header?.$el;
if (headerEl) {
headerHeight += headerEl?.offsetHeight ?? 0;
}

setPageHeight?.(unref(contentHeight) - unref(footerHeight) - headerHeight);
if (footerEl) {
footerHeight.value += footerEl?.offsetHeight ?? 0;
}
let headerHeight = 0;
const headerEl = header?.$el;
if (headerEl) {
headerHeight += headerEl?.offsetHeight ?? 0;
}
//fix:subtract content's marginTop and marginBottom value
let subtractHeight = 0;
const attributes = getComputedStyle(
document.querySelectorAll('.vben-page-wrapper-content')[0]
);
if (attributes.marginBottom) {
const contentMarginBottom = Number(attributes.marginBottom.replace(/[^\d]/g, ''));
subtractHeight += contentMarginBottom;
}
if (attributes.marginTop) {
const contentMarginTop = Number(attributes.marginTop.replace(/[^\d]/g, ''));
subtractHeight += contentMarginTop;
}
setPageHeight?.(
unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight
);
}, 400);
});
},
{
Expand Down Expand Up @@ -151,6 +168,9 @@
.@{prefix-cls} {
position: relative;

.@{prefix-cls}-content {
margin: 16px 16px 0 16px;
}
.ant-page-header {
&:empty {
padding: 0;
Expand Down
113 changes: 58 additions & 55 deletions src/components/Table/src/hooks/useTableScroll.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,68 +62,71 @@ export function useTableScroll(
if (!unref(getCanResize)) return;

await nextTick();
const table = unref(tableElRef);
if (!table) return;

const tableEl: Element = table.$el;
if (!tableEl) return;

const headEl = tableEl.querySelector('.ant-table-thead ');

if (!headEl) return;

// Table height from bottom
const { bottomIncludeBody } = getViewportOffset(headEl);
// Table height from bottom height-custom offset

const paddingHeight = 32;
const borderHeight = 0;
// Pager height
let paginationHeight = 2;
if (!isBoolean(pagination)) {
if (!paginationEl) {
paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement;
}
if (paginationEl) {
const offsetHeight = paginationEl.offsetHeight;
paginationHeight += offsetHeight || 0;
} else {
// TODO First fix 24
paginationHeight += 24;
//Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
setTimeout(() => {
const table = unref(tableElRef);
if (!table) return;

const tableEl: Element = table.$el;
if (!tableEl) return;

const headEl = tableEl.querySelector('.ant-table-thead ');

if (!headEl) return;

// Table height from bottom
const { bottomIncludeBody } = getViewportOffset(headEl);
// Table height from bottom height-custom offset

const paddingHeight = 32;
const borderHeight = 0;
// Pager height
let paginationHeight = 2;
if (!isBoolean(pagination)) {
if (!paginationEl) {
paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement;
}
if (paginationEl) {
const offsetHeight = paginationEl.offsetHeight;
paginationHeight += offsetHeight || 0;
} else {
// TODO First fix 24
paginationHeight += 24;
}
}
}

let footerHeight = 0;
if (!isBoolean(pagination)) {
if (!footerEl) {
footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement;
} else {
const offsetHeight = footerEl.offsetHeight;
footerHeight += offsetHeight || 0;
let footerHeight = 0;
if (!isBoolean(pagination)) {
if (!footerEl) {
footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement;
} else {
const offsetHeight = footerEl.offsetHeight;
footerHeight += offsetHeight || 0;
}
}
}

let headerHeight = 0;
if (headEl) {
headerHeight = (headEl as HTMLElement).offsetHeight;
}
let headerHeight = 0;
if (headEl) {
headerHeight = (headEl as HTMLElement).offsetHeight;
}

let height =
bottomIncludeBody -
(resizeHeightOffset || 0) -
paddingHeight -
borderHeight -
paginationHeight -
footerHeight -
headerHeight;
let height =
bottomIncludeBody -
(resizeHeightOffset || 0) -
paddingHeight -
borderHeight -
paginationHeight -
footerHeight -
headerHeight;

height = (height > maxHeight! ? (maxHeight as number) : height) ?? height;
setHeight(height);
height = (height > maxHeight! ? (maxHeight as number) : height) ?? height;
setHeight(height);

if (!bodyEl) {
bodyEl = tableEl.querySelector('.ant-table-body');
}
bodyEl!.style.height = `${height}px`;
if (!bodyEl) {
bodyEl = tableEl.querySelector('.ant-table-body');
}
bodyEl!.style.height = `${height}px`;
}, 200);
}

useWindowSizeFn(calcTableHeight, 200);
Expand Down