Sidebar doesn't render correctly in some mobile browsers #6176
Description
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]