Question

我有一个使用FlexView进行布局的React SPA，左侧有一个菜单，右侧有一个工作面板。右侧的某些屏幕“隐藏”菜单面板。我不知道为什么。

我尝试过flexWrap：“ nowrap”来阻止布局正确工作的FlexView的2个Paper元素连续显示，即使其变窄，但这似乎被忽略或覆盖。虽然这似乎不是实际的问题，但是是一个单独的问题。我有另一个工作视图，当浏览器窗口的宽度减小时，该视图也位于菜单的下面。

该代码是由其他人编写的，因此我正设法掌握它。

我想要的行为是菜单始终保持相同的宽度。它是一个TreeView，如果树太深或标签太长，则应该获得滚动条。

右侧工作视图应具有最小宽度，然后再获得其自己的水平滚动条。

此外，我想了解为什么忽略了2个Paper对象的FlexView容器的column指令。

我想知道是否存在一种系统的方法来追踪这些布局错误，这会变得很复杂。

这是左右两列，分别包含菜单和基于所选菜单选择的可替换组件。

        const ready = (
            <div className="allWrap">
                <div className="leftColumn" style={{ height: this.height }}>
                    <div>
                        <DragLayer snapToGrid={false}/>
                        {/* objects to drag from */}
                        <div className="heading">Drag into the tree below to add item</div>
                        {['Item Type1', 'Item Type2', 'Item Type3', 'Item Type4', 'Item Type5', 'Item Type6',
                            'Item Type7', 'Item Type8', 'Item Type9'].map(
                            item => (
                                <AddItemLabel
                                    key={item + 'AddLabel'}
                                    label={item === 'Photo' ? 'Layout Photo' : item} type={item}
                                />)
                        )}
                        <ImportDelete/>
                    </div>
                    {/*  here the main tree begins */}
                    <List
                        className="listItem listItems"
                        style={{
                            overflowY: 'scroll',
                            flex: 1,
                            display: 'flex',
                            flexDirection: 'column',
                            paddingRight: 30
                        }}
                    >
                        {
                            // there are 2 categories of things
                            ['current', 'archived'].map(
                                category => (
                                    <Category
                                        key={`${category}thing`}
                                        projects={this.props.data[category]}
                                        label={category[0].toUpperCase() + category.substr(1) + ' Things'}
                                        archived={category === 'archived'}
                                    />
                                )
                            )
                        }
                    </List>
                </div>
                <div className="rightColumn">
                    <div className="banner">
                        <img
                            style={{ alignSelf: 'center' }}
                            src={require('../../Assets/logo_1080x361 copy.svg')}
                            alt={"Image"}
                        />
                    </div>
                    <div className="view" style={{ padding: '0px', flex: 1 }}>
                        {/* the main view component, we pass clicked element and its content from the state */}
                        <ComponentView/>
                    </div>
                </div>
            </div>

这是相关的CSS类

.allWrap {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: space-around;
}
.leftColumn {
    flex: 1;
    font-size: 0.9em !important;

    width: 25%;
}
.rightColumn {
    flex: 3 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 75%;
}
.banner {
    display: flex;
    height: 100px;
    flex-direction: column;
    align-content: center;
    justify-content: center;

    font-family: 'Roboto Mono', monospace;
    font-size: 3em;
}
.view {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: stretch!important;
    align-items: stretch!important;
    justify-content: flex-start;
}

ComponentView是菜单下面的面板

应该按行排列布局行方式的组件是

        return (
            <FlexView className="container" column width="100%" height="100%">
                <Paper className={classNames(classes.root, "observation")} elevation={4}>
                    <FlexView className="obsRowThin"/>
                    <FlexView className="obsRowColour" style={{ justifyContent: 'space-between' }}>

...

                    <FlexView className="obsRowThinInvis"/>
                </Paper>
                <Paper
                    className={classNames(classes.root, "observation")
                    }
                    elevation={4}>
                    <FlexView
                        className="obsRowThin"/>

...

                </Paper>

这是相关的CSS类，大多数是JedWatson类名lib

    container: {
        display: 'flex',
        flexWrap: 'nowrap',
        width: '100%'
    }

没有错误消息，只是布局错误

FlexView布局覆盖面板

0 个答案: