Sidebar doesn't render correctly in some mobile browsers

[mdogancay]

I tested with some samsung phones with samsung mobile browser (Chrome based).

First of, sidebar-body size rendering smaller than desktop browsers on mobile browsers so some of the content not visible on the mobile browser.

Screen shoot on desktop browser: desktop-browser

Screen shoot on mobile browser: Mobile-browser

in this example I had to add extra padding to the bottom of it.

---

The second is: Custom Footer not rendering correctly in the mobile browser: Screen shoot on desktop browser: Desktop-browser

Screen shoot on mobile browser: Mobile-browser

in the mobile browser its outside of the screen.

Steps to reproduce the bug

$ vue create sidebar-test
(use [Vue 2] node-sass, babel, router, vuex, eslint, unit-jest )
/sidebar-test$ vue add bootstrap-vue
(I am using the vue plugin)

on the @/views/About.vue change :

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

to

<template>
  <div>
    <b-button v-b-toggle.sidebar-footer>Toggle Sidebar</b-button>
    <b-sidebar id="sidebar-footer" aria-label="Sidebar with custom footer" no-header shadow>
      <template #footer="{ hide }">
       <div class="d-flex bg-dark text-light align-items-center px-3 py-2">
        <strong class="mr-auto">Footer</strong>
        <b-button size="sm" @click="hide">Close</b-button>
       </div>
      </template>
      <div class="px-3 py-2">
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>
</template>

/sidebar-test$ yarn serve

Open http://localhost:8080/about

Versions

Libraries:

• BootstrapVue: ^2.20.1
• Bootstrap: 4.5.1
• Vue: ^2.6.12

Environment:

• Device: [Any Samsung phone]
• OS: [Android]
• Browser: [Samsung Browser]

[jacobmllr95]

@mdogancay Can you please create an minimal reproduction of both issues on CodeSandbox or CodePen.

[scryptoking]

@mdogancay Can you please create an minimal reproduction of both issues on CodeSandbox or CodePen.

https://bit.ly/2Ww4Jx7

[mdogancay]

I tested the footer issue and its fixed with the PR. I can test the other issue only when the new version is released (in my project).

Thank you so much guys! Your are the best. Cheers!

[jacobmllr95]

@mdogancay You can actually test it right now when you install boostrap-vue from CodeSandbox CI:

yarn add https://pkg.csb.dev/bootstrap-vue/bootstrap-vue/commit/1740cb3f/bootstrap-vue

[mdogancay]

@mdogancay You can actually test it right now when you install boostrap-vue from CodeSandbox CI:

yarn add https://pkg.csb.dev/bootstrap-vue/bootstrap-vue/commit/1740cb3f/bootstrap-vue

@jackmu95; I tested issues with this br on my samsung phones and all issues are fixed now!

Thank you so much guys! Your are the best. Cheers!