Material-ui-next В адаптивном ящике отсутствует граница

Привет, я использую следующий отзывчивый ящик материала ui, когда у основного содержимого есть много элементов, у которых отсутствует правая граница.

Material-ui-next В адаптивном ящике отсутствует граница

Я только что скопировал пример адаптивного ящика https://material-ui-next.com/demos/drawers/

Проверьте свойство стиля height класса root className

LaPoule 08.05.2018 01:52

@SamLau Я изменил его высоту: «100%», но у меня такая же ситуация.

Tazo leladze 08.05.2018 08:07

Можно попробовать 100vh

LaPoule 08.05.2018 16:42

Не меняет всего.

Tazo leladze 08.05.2018 20:03
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
4
902
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Это простое решение. Измените высоту класса root. По умолчанию он установлен на 430, так что он помещается на демонстрационной странице документации.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import List from 'material-ui/List';
import Typography from 'material-ui/Typography';
import IconButton from 'material-ui/IconButton';
import Hidden from 'material-ui/Hidden';
import Divider from 'material-ui/Divider';
import MenuIcon from '@material-ui/icons/Menu';
import { mailFolderListItems, otherMailFolderListItems } from './tileData';

const drawerWidth = 240;

const styles = theme => ({
  root: {
    flexGrow: 1,

    //CHANGE THIS TO WHATEVER HEIGHT e.g. '100%'

    height: 430,
    zIndex: 1,
    overflow: 'hidden',
    position: 'relative',
    display: 'flex',
    width: '100%',
  },
  ....
});

class ResponsiveDrawer extends React.Component {
  state = {
    mobileOpen: false,
  };

  handleDrawerToggle = () => {
    this.setState({ mobileOpen: !this.state.mobileOpen });
  };

  render() {
    const { classes, theme } = this.props;

    const drawer = (
      <div>
        <div className = {classes.toolbar} />
        <Divider />
        <List>{mailFolderListItems}</List>
        <Divider />
        <List>{otherMailFolderListItems}</List>
      </div>
    );

    return (
      <div className = {classes.root}>
      ...
      </div>
    );
  }
}

ResponsiveDrawer.propTypes = {
  classes: PropTypes.object.isRequired,
  theme: PropTypes.object.isRequired,
};

export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);

Я изменил его высоту: «100%», но ситуация такая же.

Tazo leladze 08.05.2018 08:07

С height:1000px у меня нет ошибки. Разместите свой код.

Пока у вас нет свитка, вы его не видите. Попробуйте добавить много шрифтов типа «Вы думаете, что вода движется быстро», и вы это увидите.

Tazo leladze 09.05.2018 08:20
Ответ принят как подходящий

Добавьте JSFiddle, и я посмотрю, смогу ли я вам помочь. Но вы можете проверить элемент с помощью инспектора браузера, вы можете попробовать добавить свойство height в класс j137:

Без собственности:

Со свойством heigth

Можете ли вы отредактировать свой ответ и рассказать, как добавить свойство высоты в класс j137?

Tazo leladze 09.05.2018 11:04

Класс, созданный демо-версией Mui, отличается от вашего локального className, поэтому вы не найдете j137 className в своем локальном приложении. С помощью веб-инспектора вы сможете проверить тот же фрейм, что и в следующих примерах. Вам необходимо заменить div на style или className в вашем коде

LaPoule 09.05.2018 12:40

См. material-ui-next.com/customization/overrides, чтобы переопределить панель приложений и добавить свойство height.

LaPoule 09.05.2018 12:41

Другие вопросы по теме