CODEWITHSUNDEEP
cssreactjssasstabsmaterial-ui
Min
Min

Reputation: 528

can you make material ui tab responsive?

Is it possible to make the material ui tab react component responsive?

Documentation of MATERIAL UI TAB

Say I have multiple tab items with a search bar like below

Edit Material demo

I want to make the input component stretch the whole width of the screen for mobile view (screen less than 500px)

I tried putting width: 100% on the tab with media queries but it didnt work. I also wanted to remove the focus effect when i click on the search component which is illustrated below

enter image description here

To summarise

1 ) I want the input component to stretch the whole width on smaller screens
2 ) I want to remove the focus effect when clicking the first tab(search component)

Upvotes: 0

Views: 7433

Answers (1)

ShinaBR2
ShinaBR2

Reputation: 2705

This is a working example, forked from your codesandbox: https://codesandbox.io/s/material-demo-fpfw5?file=/demo.js.

Basically I changed something for only screen sizes smaller than 600px:

  • First, set "max-width" and "width" for first tab to "100%".
  • Second, set width for input inside tab1 to "100%.
  • Last, add disableRipple attribute to first tab.

One thing, I use the default breakpoints of Material-UI, which defined here: https://material-ui.com/customization/breakpoints/

If you wanna change to 500px, just define your own breakpoint.

Upvotes: 1

Related Questions