Skip to content

Sidebar doesn't render correctly in some mobile browsers #6176

@mdogancay

Description

@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]

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions