[docs] Make the layout demos usable outside of the box

[oscl]

I tried Bottom App Bar on a Lenovo a 2010 smartphone. But it isn't working properly. You'll know the issue by watching below image: A small space is shown below that Bottom Nav Bar. How could I remove it? When I toggled my web browser (Chrome) to Desktop mod, the UI became more bad:-( Check below screenshot: Some codes are shown below: App.js: `import React, { Component } from 'react'; import Ui from './Ui';

class App extends Component { render() { return (

);

} }

export default App;`

Ui.js:

`import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; import Typography from '@material-ui/core/Typography'; import IconButton from '@material-ui/core/IconButton'; import Paper from '@material-ui/core/Paper'; import Button from '@material-ui/core/Button'; import List from '@material-ui/core/List'; import ListItem from '@material-ui/core/ListItem'; import ListItemText from '@material-ui/core/ListItemText'; import ListSubheader from '@material-ui/core/ListSubheader'; import Avatar from '@material-ui/core/Avatar'; import MenuIcon from '@material-ui/icons/Menu'; import AddIcon from '@material-ui/icons/Add'; import SearchIcon from '@material-ui/icons/Search'; import MoreIcon from '@material-ui/icons/MoreVert';

const styles = theme => ({ container: { position: 'relative', maxWidth: 500, }, text: { paddingTop: theme.spacing.unit, paddingLeft: theme.spacing.unit 2, paddingRight: theme.spacing.unit 2, }, main: { height: 400, overflowY: 'auto', position: 'relative', }, list: { marginBottom: theme.spacing.unit * 2, }, subHeader: { backgroundColor: '#fff', }, toolbar: { alignItems: 'center', justifyContent: 'space-between', }, fabButton: { position: 'absolute', top: -30, left: 0, right: 0, margin: '0 auto', }, });

const messages = [ { id: 1, primary: 'Brunch this week?', secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat", person: '/static/images/adeel.jpg', }, { id: 2, primary: 'Birthday Gift', secondary: 'Do you have a suggestion for a good present for John on his work anniversary. I am really confused & would love your thoughts on it.', person: '/static/images/uxceo-128.jpg', }, { id: 3, primary: 'Recipe to try', secondary: 'I am try out this new BBQ recipe, I think this might be amazing', person: '/static/images/remy.jpg', }, { id: 4, primary: 'Yes!', secondary: 'I have the tickets to the ReactConf for this year.', person: '/static/images/uxceo-128.jpg', }, { id: 5, primary: "Doctor's Appointment", secondary: 'My appointment for the doctor was rescheduled for next Saturday.', person: '/static/images/adeel.jpg', }, { id: 6, primary: 'Discussion', secondary: 'Menus that are generated by the bottom app bar (such as a bottom navigation drawer or overflow menu) open as bottom sheets at a higher elevation than the bar.', person: '/static/images/remy.jpg', }, { id: 7, primary: 'Summer BBQ', secondary: 'Who wants to have a cookout this weekend? I just got some furniture for my backyard and would love to fire up the grill.', person: '/static/images/uxceo-128.jpg', }, ];

function BottomAppBar(props) { const { classes } = props; return (

Inbox {messages.map(({ id, primary, secondary, person }) => ( {id === 1 && Today} {id === 3 && Yesterday} ))}

); } BottomAppBar.propTypes = { classes: PropTypes.object.isRequired, }; export default withStyles(styles)(BottomAppBar);` Please help me... I'm new to ReactJS and Material-Ui

[oliviertassinari]

@AJ-Creations Don't miss this section: https://material-ui.com/getting-started/usage/#responsive-meta-tag

[oscl]

@oliviertassinari meta viewport tag is added by default to public/index.html file. I don't have to put it anywhere manually.

[oliviertassinari]

@AJ-Creations It's also important to notice that the demo wasn't written to be usable outside of the box.