Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

[docs] Slider demo size shifts when enabling Inspect Mode in devtools responsive view #45434

Open
Jakukow opened this issue Feb 27, 2025 · 4 comments
Labels
bug 🐛 Something doesn't work component: slider This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation ready to take Help wanted. Guidance available. There is a high chance the change will be accepted

Comments

@Jakukow
Copy link

Jakukow commented Feb 27, 2025

Steps to reproduce

Steps:

  1. Open this link to live example: https://mui.com/material-ui/react-slider/
  2. Click F12
  3. Switch between desktop and mobile view or switch to mobile view and press CTRL + SHIFT + C
Nagranie.ekranu.z.2025-02-27.14-06-02.webm

Current behavior

Margin / Height of slider changes

Expected behavior

Margin / Height should stay the same

Context

No response

Your environment

No response

Search keywords: height, margin, mobile, slider

@Jakukow Jakukow added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 27, 2025
@Jakukow Jakukow changed the title Height/Margin change between mobile and desktop view Slider height/margin change between mobile and desktop view Feb 27, 2025
@mj12albert mj12albert added docs Improvements or additions to the documentation component: slider This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 28, 2025
@mj12albert mj12albert changed the title Slider height/margin change between mobile and desktop view [docs] Slider demo height/margin change between mobile and desktop view Feb 28, 2025
@mj12albert
Copy link
Member

What is ctrl-shift-c expected to do? @Jakukow

@Jakukow
Copy link
Author

Jakukow commented Feb 28, 2025

@mj12albert it enables inspect mode, so it's easier to switch bettween desktop and mobile view

@mj12albert mj12albert changed the title [docs] Slider demo height/margin change between mobile and desktop view [docs] Slider demo size shifts when enabling Inspect Mode in devtools responsive view Feb 28, 2025
@mj12albert mj12albert added the bug 🐛 Something doesn't work label Feb 28, 2025
@mj12albert
Copy link
Member

mj12albert commented Feb 28, 2025

@Jakukow 👌 I see ~ I can reproduce this by just clicking the inspect mode button from the UI

And it just seems to only happen to Slider 🤔

@mj12albert mj12albert assigned Jakukow and unassigned Jakukow Feb 28, 2025
@mj12albert mj12albert added the ready to take Help wanted. Guidance available. There is a high chance the change will be accepted label Feb 28, 2025
@mj12albert
Copy link
Member

Added the ready to take label in case anyone is interested in looking into this before we get around to it.

Please reach out in this thread if you're interested ~

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
bug 🐛 Something doesn't work component: slider This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation ready to take Help wanted. Guidance available. There is a high chance the change will be accepted
Projects
None yet
Development

No branches or pull requests

2 participants