Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

responsive not working in react

See original GitHub issue

responsive not working in react .

I created the editor as follows:

import React, { Component, Fragment , createRef} from "react";

// New
import suneditor from 'suneditor'
import plugins from 'suneditor/src/plugins'
import 'suneditor/dist/css/suneditor.min.css'


class Editor extends Component {

    constructor(props) {
        super(props);
        this.state = {
            EditMode : false,
        };
        this.txtArea = createRef();
    }
    
    componentDidMount() {
                //New 
        this.SunEditor =  suneditor.create(this.txtArea.current,{
            buttonList: [
                ['undo', 'redo'],
                ['font', 'fontSize', 'formatBlock', 'align', 'lineHeight'],
                ['bold', 'underline', 'italic', 'strike', 'fontColor', 'hiliteColor'],
                ['removeFormat'],
                ['-right', ':i-More Misc-default.more_vertical', 'showBlocks', 'codeView', 'preview', 'print', 'save'],
                ['-right', ':r-More Rich-default.more_plus', 'horizontalRule', 'list', 'table'],
                ['-right', 'image', 'video', 'audio', 'link'],
                // (min-width: 992)
                ['%1100', [
                    ['undo', 'redo'],
                    ['font', 'fontSize', 'formatBlock', 'align', 'lineHeight'],
                    ['bold', 'underline', 'italic', 'strike', 'fontColor', 'hiliteColor'],
                    ['removeFormat'],
                    ['-right', ':i-More Misc-default.more_vertical', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'fullScreen'],
                    ['-right', ':r-More Rich-default.more_plus', 'image', 'video', 'audio', 'link', 'horizontalRule', 'list', 'table'],
                ]],
                ['%870', [
                    ['undo', 'redo'],
                    ['font', 'fontSize', 'formatBlock', 'align', 'lineHeight'],
                    [':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'fontColor', 'hiliteColor'],
                    ['removeFormat'],
                    ['-right', ':i-More Misc-default.more_vertical', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'fullScreen'],
                    ['-right', ':r-More Rich-default.more_plus', 'image', 'video', 'audio', 'link', 'horizontalRule', 'list', 'table'],
                ]],
                ['%660', [
                    ['undo', 'redo'],
                    [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'align', 'lineHeight'],
                    [':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'fontColor', 'hiliteColor'],
                    ['removeFormat'],
                    ['-right', ':i-More Misc-default.more_vertical', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'fullScreen'],
                    ['-right', ':r-More Rich-default.more_plus', 'image', 'video', 'audio', 'link', 'horizontalRule', 'list', 'table'],
                ]],
                ['%335', [
                    ['undo', 'redo'],
                    [':p-More Paragraph-default.more_paragraph', 'font', 'fontSize', 'formatBlock', 'align', 'lineHeight'],
                    [':t-More Text-default.more_text', 'bold', 'underline', 'italic', 'strike', 'fontColor', 'hiliteColor', 'removeFormat'],
                    ['-right', ':i-More Misc-default.more_vertical', 'showBlocks', 'codeView', 'preview', 'print', 'save', 'fullScreen'],
                    ['-right', ':r-More Rich-default.more_plus', 'image', 'video', 'audio', 'link', 'horizontalRule', 'list', 'table'],
                ]],
            ],
            placeholder: this.props.placeholder ? this.props.placeholder : 'متن را وارد نمایید',
            value :this.props.value,
            plugins: plugins,
            minHeight : 300,
            charCounter: true,
            font: [
                'Vazir', 'Arial', 'Comic Sans MS', 'Courier New', 'Impact',
                'Georgia', 'tahoma', 'Trebuchet MS', 'Verdana'
            ],
        });
        
    }


    render() {
        
        return (
            <Fragment>
                <textarea ref={this.txtArea}></textarea>
            </Fragment>
        );
    }
}

export default Editor;

But the reactionary does not work properly.

But I see this result in the largest size :

Issue Analytics

State:
Created 2 years ago
Comments:11 (5 by maintainers)

Top GitHub Comments

1reaction

JiHong88commented, Nov 24, 2021

I thought the width would be “100%”… “width” is also available as an option.

suneditor.create("#id", {
 width: "100%"
})

1reaction

Saeeed-Bcommented, Nov 24, 2021

@JiHong88 hi The result of another attempt: I used iframe, but nothing changed. And it did not work as well as before. As before, when the inspector opens, the sizes are correct.

But what do you say about the width of the upper elements, It made me give textarea 100% width and everything was fine. Now the size of the editor is quite correct when loading and is quite responsive.