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
VersionsLibraries:
Environment:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4