From 1d489c969cc84ed13190270869f65a9b6eaf1c90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jacob=20M=C3=BCller?= <jacob.mueller.elz@gmail.com>
Date: Thu, 8 Oct 2020 11:08:27 +0200
Subject: [PATCH] fix(b-card): properly support header/footer with body image
 overlay

---
 src/components/card/card.js | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/card/card.js b/src/components/card/card.js
index 94be1154693..8d135bb4c43 100644
--- a/src/components/card/card.js
+++ b/src/components/card/card.js
@@ -36,10 +36,12 @@ export const BCard = /*#__PURE__*/ Vue.extend({
   props,
   render(h, { props, data, slots, scopedSlots }) {
     const {
+      imgSrc,
       imgLeft,
       imgRight,
       imgStart,
       imgEnd,
+      imgBottom,
       header,
       headerHtml,
       footer,
@@ -55,12 +57,12 @@ export const BCard = /*#__PURE__*/ Vue.extend({
 
     let $imgFirst = h()
     let $imgLast = h()
-    if (props.imgSrc) {
+    if (imgSrc) {
       const $img = h(BCardImg, {
         props: pluckProps(cardImgProps, props, unprefixPropName.bind(null, 'img'))
       })
 
-      if (props.imgBottom) {
+      if (imgBottom) {
         $imgLast = $img
       } else {
         $imgFirst = $img
@@ -82,9 +84,18 @@ export const BCard = /*#__PURE__*/ Vue.extend({
 
     let $content = normalizeSlot(SLOT_NAME_DEFAULT, slotScope, $scopedSlots, $slots)
 
-    // Wrap content in <card-body> when `noBody` prop set
+    // Wrap content in `<card-body>` when `noBody` prop set
     if (!props.noBody) {
       $content = h(BCardBody, { props: pluckProps(bodyProps, props) }, $content)
+
+      // When the `overlap` prop is set we need to wrap the `<b-card-img>` and `<b-card-body>`
+      // into a relative positioned wrapper to don't distract a potential header or footer
+      if (props.overlay && imgSrc) {
+        $content = h('div', { staticClass: 'position-relative' }, [$imgFirst, $content, $imgLast])
+        // Reset image variables since they are already in the wrapper
+        $imgFirst = h()
+        $imgLast = h()
+      }
     }
 
     let $footer = h()