Nick Meldrum Nick Meldrum - 2 months ago 17
React JSX Question

chip inside toolbar incorrect vertical alignment

Problem description



I am trying to put a chip inside a toolbar and am having problems with vertical alignment. I can fix it with overriding some styles of course, but as a real beginner I assume I'm doing something wrong i.e. not using the material-ui components in the right way?

Steps to reproduce



If I put a chip as a direct child of an appbar the chips fills the whole height incorrectly:
http://i.imgur.com/2mHKaIV.png


render() {
return (
<Toolbar>
<Chip>
<Avatar icon={<AccountCircleIcon />} />
Not signed in
</Chip>
</Toolbar>
)
}


If I wrap it in a list item it's height is correct but it still isn't centered in the toolbar:
http://i.imgur.com/Ksc5CTd.png


render() {
return (
<Toolbar>
<ListItem disabled={true}>
<Chip>
<Avatar icon={<AccountCircleIcon />} />
Not signed in
</Chip>
</ListItem>
</Toolbar>
)


What am I doing wrong?
(naturally I want it vertically centered in the toolbar and of the correct height for a chip)

Versions




  • Material-UI: 0.15.4

  • React: 15.3.2

  • Browser: Chrome 53.0.2785.116 (Mac OSX)


Answer

I was able to do a mockup (I hate how difficult it is to set up React/Material-Ui problems) and found the same issue. I think it's expected behavior from how the chip is positioned.

However, it is all fixed with margin: 'auto'

render() {
    return (
    <Toolbar>
        <Chip style={{ margin: 'auto' }}>
            <Avatar icon={<AccountCircleIcon />} />
            Not signed in
        </Chip>
    </Toolbar>
    )
}