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.

[Drawer] Left and right anchored Drawers overexpand with inner Tabs

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

When using tabs inside a Drawer component with top or bottom anchor, it expands the drawer outside the viewport

Expected behavior 🤔

The Drawer should not expand outside of the viewport

Steps to reproduce 🕹

https://codesandbox.io/s/quirky-lucy-dzp1ub

Steps:

Create a Drawer with an anchor left or right
Create a Tabs component within
Create enough Tab components within that to require scroll

Context 🔦

No response

Your environment 🌎

Browser: Google Chrome

`npx @mui/envinfo`

  System:
    OS: macOS 11.5.2
  Binaries:
    Node: 17.1.0 - ~/.nvm/versions/node/v17.1.0/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v17.1.0/bin/npm
  Browsers:
    Chrome: 99.0.4844.51
    Edge: Not Found
    Firefox: 96.0.2
    Safari: 14.1.2

Issue Analytics

State:
Created 2 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

OskarDcommented, Mar 9, 2022

@OskarD sure. Here’s an example of how you could do that using the sx prop. Note that I also made the Tabs scrollable given the constrained space.

The most scalable place for you to place that change is on the theme, though. Highly recommend you have a look at the How to customize article later on.

Thank you so much, that is incredible support! I really appreciate it 😃

1reaction

danilo-lealcommented, Mar 9, 2022

@OskarD sure. Here’s an example of how you could do that using the sx prop. Note that I also made the Tabs scrollable given the constrained space.

The most scalable place for you to place that change is on the theme, though. Highly recommend you have a look at the How to customize article later on.

Top Results From Across the Web

android - navigation drawer with tabs inside - Stack Overflow

I would like to do a Navigation Drawer with a user info, Photo and name (like play store) and a 3 Tabs to...

React Navigation: Stacks, Tabs, and Drawers … Oh my! | Async

Navigators have visible elements (i.e. the tabs/drawer/header), ... to tell the TabNavigator how to arrange the tabs from left to right.

Untitled

Defy gravity sheet music, How do you create a signature online, Getcurrenttimemillis, Stivasoft review, Kang susie, 1-drawer/2-door, Come muore piton nel ...

2018_crossroads-and-redwood-owners.pdf - Crossroads RV

Recreational vehicles are much smaller than homes and therefore the exchange of air inside a recreational vehicle is significantly less than a home....

572-2022-Jayco-WhiteHawk-OM-BW.pdf

mold or any damage caused by mold to the inside or outside of the RV; ... Remove the screen by pulling the red...