fix(@vben/common-ui): prevent footer slot from overlapping content when Page contains Grid (#8056)
The Page component's outer container used min-h-full, which doesn't provide an explicit height for flex children. Combined with h-full on the content div, this caused the footer slot to overlap table content (Grid/vxe-table) because the content area didn't properly account for footer space in the flex column layout. Fix: 1. Change outer container from min-h-full to h-full — gives the flex container an explicit height so percentage heights resolve correctly. 2. Change content area from static h-full to flex-1 when autoContentHeight is false — lets the flex layout naturally distribute remaining space between content and footer. Closes #5494 Co-authored-by: jefsky <jefsky@users.noreply.github.com>
This commit is contained in:
@@ -56,7 +56,7 @@ onMounted(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="relative flex min-h-full flex-col">
|
<div class="relative flex h-full flex-col">
|
||||||
<div
|
<div
|
||||||
v-if="
|
v-if="
|
||||||
description ||
|
description ||
|
||||||
@@ -92,7 +92,7 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div :class="cn('h-full p-4', contentClass)" :style="contentStyle">
|
<div :class="cn(autoContentHeight ? 'h-full' : 'flex-1', 'p-4', contentClass)" :style="contentStyle">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user