Material-ui: [AppBar] AppBar layout is broken, when using Chromium browser.

[lon9]

Problem description

I'm using this library on my web site. AppBar's display: flex attribute is disappeared when I open the page on Chromium web browser on Ubuntu.

Steps to reproduce

The code is below.

import React, { Component } from 'react';
import { Link } from 'react-router';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';


export class Root extends Component{
  static propTypes = {
    children: React.PropTypes.any
  };

  static childContextTypes = {
    muiTheme: React.PropTypes.object.isRequired,
  };

  constructor(props){
    super(props);
    this.state = {
      open: false
    };
  }

  getStyles(){
    const styles = {
      appBar: {
        display: 'flex'
      }
    };
    return styles;
  }

  getChildContext(){
    return {muiTheme: getMuiTheme()};
  }

  leftButtonTouched = () => this.setState({open: !this.state.open});

  rightButtonTouched = () => {
    window.location  = '/'
  }

  menuItemTouched = (e) => {
    this.setState({open: !this.state.open});
    switch(e.target.innerHTML){
      case 'Top':
        window.location = '/';
        break;
    }
  }

  render(){
    const styles = this.getStyles();
    return (
      <div>
        <AppBar
          onLeftIconButtonTouchTap={this.leftButtonTouched}
          onRightIconButtonTouchTap={this.rightButtonTouched}
          iconElementRight={<IconButton iconClassName="material-icons" onClick={this.rightButtonTouched}>home</IconButton>}
          style={styles.appBar}/>
        <Drawer 
          open={this.state.open}
          docked={false}
          width={200}
          onRequestChange={open => this.setState({open})}>
          <MenuItem primaryText="Top" onTouchTap={this.menuItemTouched}/>
        </Drawer>
        {this.props.children}
      </div>
    );
  }
}

I give display: flex as style to AppBar, but It didn't work. I added display: flex attribute from Chrome dev tools, It work property and on other browsers, it work property. Can you please help me?

Versions

• Material-UI: 0.15.0
• React: 15.0.2
• Browser: Chromium 50.0.2661.102

[lon9]

I think #4417 may be same problem.

[kdex]

Probably related bug: onTitleTouchTap fires not only for the title element, but for the entire AppBar since 0.15.0.

[moduval]

It is working great on their website example. I think they need to use something to prefix inline style. I tried to changed display: flex to -webkit-flex in the devtools and it fixed the bug. There is a similar bug with drawer on older browser.

[davincho]

Can confirm that. Just set display: flex for the AppBar component as a quick fix.

[lon9]

Thank you @moduv5
I fixed it with your method changing display:flex to display: -webkit-flex.

  getStyles(){
    const styles = {
      appBar: {
        display: '-webkit-flex'
      }
    };
    return styles;
  }

[moduval]

@Rompei You need to keep the display: flex as -webkit-flex is only available on webkit based browser. For browser such as firefox -webkit-flex will not work. You should also add the other browsers specific prefix for it to work on older an newer browsers

[jaunkst]

Even with an auto-prefixer if both display:flex and display -webkit-flex are set display:flex will disappear

[commesan]

Can't seem to get it working fiddling with different display value. Best I can get it is a horizontal layout, but with the text aligned to the bottom of the bar in Firefox and Chromium.

[lon9]

@moduv5 Thank you your warning. Finally, my code became like this.

  getStyles(){
    const styles = {
      appBar: {
        display: '-webkit-flex',
        display: 'flex'
      }
    };
    return styles;
  }

[lon9]

I fixed my code like that, but got a new situation mentioned by @jaunkst :-(

[davincho]

I have to same issue with the bar in a grid tile.
Same reason, as display: -webkit-box,-moz-box,-ms-flexbox,-webkit-flex,flex is not a valid CSS definition.

[moduval]

I finally fixed this problem. I was not passing UserAgent in muitheme provider so the Inline-style-prefixer was not able to choose the right prefix depending on the browser.

[davincho]

@moduv5 - Good call: userAgent: 'all' resulted into the erroneous behavior. It is even deprecated btw. https://github.com/rofrischmann/inline-style-prefixer#prefixerprefixall-static
As soon as you pass an appropriate user-agent string everything works smooth!