Jo Ko Jo Ko - 3 months ago 45
React JSX Question

ReactJS + Redux - Material-UI: How to make <Toolbar/> floatable?

Using: http://www.material-ui.com/#/components/toolbar , how can I make floatable when scrolling down?

I was able to do it with with the following:

textAlign:'center', position: 'fixed', top: 0

but when I do it with the
<Toolbar/>
, it resizes weirdly.

Answer

Have you tried setting the width to 100%? This worked for me:

<Toolbar
  style={{
    position: 'fixed',
    top: 0,
    width: '100%'
  }}>
// Content
</Toolbar>

Or:

<Toolbar
  style={{
    position: 'fixed',
    top: 0,
    left: 0,
    right: 0,
  }}>
// Content
</Toolbar>
Comments