Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

DrawerFooter doesn't appear in mobile browsers

See original GitHub issue

Bug report

Describe the bug

The DrawerFooter component is not appearing when a Drawer is open in mobile browsers. Tested on Chrome/Brave/Firefox/Safari on both Android and iOS

To reproduce

Click on “Open Drawer”
Drawer will open
Should see “Cancel” and “Upload File” buttons in lower right in DrawerFooter but do not appear on mobile browsers

Minimal reproduction

https://5neo3.csb.app/

Expected behavior

DrawerFooter component should appear when drawer is open

Screenshots

System information

OS: Android/iOS
Browser (if applies): Chrome/Brave/Firefox on Android - Safari on iOS
Version of @chakra-ui/core: 1.0.0-rc.8

Issue Analytics

State:
Created 3 years ago
Comments:18 (5 by maintainers)

Top GitHub Comments

3reactions

nicolascavallincommented, Nov 18, 2020

Well, I’m newbie, and maybe is not the best practice, but I solved the problem in the next way:

<DrawerOverlay heigth='100% !important>
     <DrawerContent heigth='100% !important>
          [...]

My problem now is when the keyboard goes up, footer too.

1reaction

acolytec3commented, Nov 13, 2020

@with-heart One last follow-up here for how I solved this in my use case. I used your trick of extra bottom-padding with a media-query of this sort - <DrawerFooter mb={{base:"25%",sm:"25%",md:"25%",lg:0,xl:0}}>

This seems to work well enough for now.

Top Results From Across the Web

Footer not displayed properly on mobile browsers [closed]

If you scroll down, you'll notice that the footer is revealed. Chrome's mobile emulators also display the footer properly.

Custom Header and Footer - React Native Drawer Navigator

Check out on udemy: https://bit.ly/3vbA1LX In this video we will see how we can create drawer navigation using react native and re …...

Application service — Vuetify

In Vuetify, the v-app component and the app prop on components like v-navigation-drawer , v-app-bar , v-footer and more, help bootstrap your ...

Problem with menu icons. Astra theme | WordPress.org

I am using Astra theme with Elementor. But it is appreciated that the drop-down menu does not recognize the icons of the “Astra”...

Modal - Bootstrap

Below is a static modal example (meaning its position and display have been ... </p> </div> <div class="modal-footer"> <button type="button" class="btn ...