I'm new to react, I have gone through draftjs editor but when I try to use the code, the border is not getting displayed.

Here is a snapshot of the editor:

My Code:

export default class App extends Component {
  render() {
    return (
      <Container>
        <Modal trigger={<Button>Show Content</Button>}>
          <Modal.Content>
            <Editor />
            <Button>Send</Button>
          </Modal.Content>
        </Modal>
      </Container>
    );
  }
}

Here the whole code: ""

Tried giving border but the problem is when i write more words, it is ing down beyond the border. Can anyone help me in this query?

I'm new to react, I have gone through draftjs editor but when I try to use the code, the border is not getting displayed.

Here is a snapshot of the editor:

My Code:

export default class App extends Component {
  render() {
    return (
      <Container>
        <Modal trigger={<Button>Show Content</Button>}>
          <Modal.Content>
            <Editor />
            <Button>Send</Button>
          </Modal.Content>
        </Modal>
      </Container>
    );
  }
}

Here the whole code: "https://codesandbox.io/s/distracted-ritchie-s75re"

Tried giving border but the problem is when i write more words, it is ing down beyond the border. Can anyone help me in this query?

• javascript
• html
• reactjs
• react-draft-wysiwyg

• try div.rdw-editor-main{border: 1px solid #f2f2f2;} – SFernando Commented Mar 27, 2020 at 9:22

2 Answers 2

First, you are using react-draft-wysiwyg

• refer with its document

You can set the editor styles via the props of editorStyle

editorStyle: style object applied around the editor

import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
...
<Editor editorStyle={{ border: "1px solid" }} />

As you're using an imported editor you have to specify the className used properly. So, inspect the element at which you want to update properties and find the className of the DOM element. Sometimes, there is a chance that native css code might override external one.So, Try to specify manually as,

div.rdw-editor-main{
  border: 1px solid #C0C0C0 ;
}

Add this to your style.css and you can definitely see the border which works perfectly fine. You can also do this,

<Editor editorStyle={{ border: "1px solid #C0C0C0" }} />

Hope it helps!. Happy Coding!!