CODEWITHSUNDEEP
javascripthtmlcssreactjsmaterial-ui
Keida
Keida

Reputation: 55

How to let Material-UI input field fill toolbar

I am struggling to get the material-ui app bar example to work as I would like to. Codesandbox (from Material-UI website).

What I Am Trying To Achieve:

What I am trying to achieve is to get the search field to grow all the way to the right (effectively taking the majority of the app bar no matter what screen size).

What I Have Tried:

I have tried using flexGrow: 1 as follows which only grows the search bar slightly (not till the end):

search: {
  position: 'relative',
  borderRadius: theme.shape.borderRadius,
  backgroundColor: fade(theme.palette.common.white, 0.15),
  '&:hover': {
    backgroundColor: fade(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
  marginLeft: theme.spacing(3),
  width: 'auto',
  flexGrow:1
},}

I have also tried setting width: '100%' instead of 'width: auto' but that makes the Material-UI logo disappear.

Image of desired result: enter image description here

Upvotes: 1

Views: 686

Answers (1)

keikai
keikai

Reputation: 15146

Remove the width: 'auto' from your current code,

Add minWidth with title

title: {
  display: 'none',
  minWidth: '120px',                 // Add
  [theme.breakpoints.up('sm')]: {
    display: 'block',
  },
},
search: {
  position: 'relative',
  borderRadius: theme.shape.borderRadius,
  backgroundColor: fade(theme.palette.common.white, 0.15),
  '&:hover': {
    backgroundColor: fade(theme.palette.common.white, 0.25),
  },
  marginRight: theme.spacing(2),
  marginLeft: 0,
  width: '100%',                     // Keep
  [theme.breakpoints.up('sm')]: {
    marginLeft: theme.spacing(3),
    // width: 'auto',                // Remove
  },
},

enter image description here

enter image description here

Upvotes: 1

Related Questions