初始化完会有横向滚动条，导致字体、字号不能用

[yueyunyue]

[margox]

请问你那边可以看一下是那一块的内容撑大了导致的滚动条么？

[margox]

另外，要保证下拉组件的位置显示正常，需要设置viewWrapper属性值

[yueyunyue]

`import React from 'react' import ReactDOM from 'react-dom' import {Row, Col} from 'antd' import BraftEditor from 'braft-editor' import 'braft-editor/dist/braft.css'

export default class DraftjsView extends React.Component {

render () {

    const editorProps = {
        height: 500,
        initialContent: null,
        viewWrapper: '.demo',
        media:{
            image: true, // 开启图片插入功能
            video: false, // 开启视频插入功能
            audio: false, // 开启音频插入功能
            validateFn: null, // 指定本地校验函数，说明见下文
            uploadFn: null // 指定上传函数，说明见下文
        },
        onChange: this.handleChange,
        onHTMLChange: this.handleHTMLChange
    }

    return (
        <Row>
            <Col span={12} className={"demo"}>
                <BraftEditor {...editorProps}/>
            </Col>
        </Row>
    )

}

handleChange = (content) => {
    console.log(content)
}

handleHTMLChange = (html) => {
    console.log(html)
}

}`

[margox]

肯能还是需要麻烦您看一下是哪个元素导致的滚动条，我这个项目实践应用太少了，好多问题我自己都么见过😭😭😭

[yueyunyue]

感觉滚动条是BraftEditor-container 产生的

[yueyunyue]

去掉就好了

[yueyunyue]

覆盖掉overflow以后 弹窗又跑偏了

[margox]

overflow 选项只是控制是否显示滚动条，真正造成滚动条的，是子元素，感觉可能是有什么DOM元素的样式被干扰了。

[yueyunyue]

你能看出来是什么导致的吗

[margox]

你的项目是开源的么？ 如果方便的话可以，我这边不亲自跑一下，不太好定位问题😭

[yueyunyue]

不是开源的；就是antd集成的 https://github.com/ant-design/ant-design-pro 可以用这个项目试试

[liushunqiu]

这个确实是，我页面刚开始进去的时候也没事，然后在当前页面刷新的时候，也会出现滚动条，然后就没办法选择字体大小了。~ @margox 希望能解决~

[margox]

@liushunqiu 都是在antd里面用会出现这个问题么？

[liushunqiu]

是的。用的ant.design.pro @margox

[margox]

能看一下你们这个页面的完整结构么？ 我这边直接用貌似是正常的

[yueyunyue]

import React from 'react' import ReactDOM from 'react-dom' import {Row, Col} from 'antd' import BraftEditor from 'braft-editor' import 'braft-editor/dist/braft.css'

export default class DraftjsView extends React.Component {

render () {

const editorProps = {
    height: 500,
    initialContent: null,
    viewWrapper: '.demo',
    media:{
        image: true, // 开启图片插入功能
        video: false, // 开启视频插入功能
        audio: false, // 开启音频插入功能
        validateFn: null, // 指定本地校验函数，说明见下文
        uploadFn: null // 指定上传函数，说明见下文
    },
    onChange: this.handleChange,
    onHTMLChange: this.handleHTMLChange
}

return (
    <Row>
        <Col span={12} className={"demo"}>
            <BraftEditor {...editorProps}/>
        </Col>
    </Row>
)

}

handleChange = (content) => { console.log(content) }

handleHTMLChange = (html) => { console.log(html) } }

你试试用这个间一个页面，我这边是一开始有滚动条 ，如果浏览器窗口改变以后，那个滚动条就没了

[margox]

我这边还是没出现这个问题，不过我修改了一下可能会导致这个问题的地方，现在已发1.1.12，升级一下试试？ @yueyunyue @liushunqiu

[liushunqiu]

已经升级，发现就算出现滚动条也不会导致字体下拉框移动的问题了。

[margox]

@liushunqiu 能方便定位一下滚动条是哪个元素产生的么？看一下哪个元素的宽度异常， 我直接用上面提供的页面源码是无法复现的，应该是外部样式干扰到了

[margox]

找到原因了，又发了一版，不知道会不会有副作用，害怕哈哈