Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Paper cannot be resized while children are left for caller #1443

Closed
leftstick opened this issue Aug 18, 2015 · 1 comment
Closed

Paper cannot be resized while children are left for caller #1443

leftstick opened this issue Aug 18, 2015 · 1 comment
Labels
component: Paper This is the name of the generic UI component, not the React module!

Comments

@leftstick
Copy link

class Panel extends React.Component {

    constructor(props) {
        super(props);
        let paperStyle = {
            minHeight: '350px',
            width: '850px',
            margin: '5px auto 0 auto',
            backgroundColor: Mui.Styles.Colors.blueGrey50
        };

        this.state = {paperStyle};
    }

    _getWindowWidth() {
        let element = document.documentElement;
        let body = document.getElementsByTagName('body')[0];
        let width = window.innerWidth || element.clientWidth || body.clientWidth;
        return width;
    }

    _onResize(e) {
        let originalStyle = this.state.paperStyle;
        if (this._getWindowWidth() <= 850) {
            originalStyle.width = '100%';
        } else {
            originalStyle.width = '850px';
        }
        this.setState({paperStyle: originalStyle});
    }

    componentWillMount() {
        window.addEventListener('resize', this._onResize, false);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this._onResize, false);
    }

    render() {
        let Paper = Mui.Paper;
        return (
            <Paper style={this.state.paperStyle} zDepth={1} rounded={false}>
              <TodoInput/>
            </Paper>
            );
    }
}

export default Panel;

The code works well as above, while i have component TodoInput inside Paper, but if i change the render method like following:

    render() {
        let Paper = Mui.Paper;
        return (
            <Paper style={this.state.paperStyle} zDepth={1} rounded={false}>
               { this.props.children }
            </Paper>
            );
    }

I was expecting this Panel can used as a auto resizable component in other places, but unfortunately it doesn't work.

Since i am new to React , i am wondering if it is a bug or i am in the wrong way?

@leftstick
Copy link
Author

Weird issue, once i set zDepth as an changeable state, as following:

zDepth={this.state.zDepth}

The resize feature works

@oliviertassinari oliviertassinari added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 25, 2022
@zannager zannager added component: Paper This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: Paper This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

3 participants