React-draft-wysiwyg: Formatting Toolbar

[dahudson88]

Hello,

This may be a super basic question, but when I am trying to get the basic Editor component working, the toolbar shows allt he icons vertically. How do I get the toolbar to display correctly?

<Editor
        editorState={this.state.descriptionEditorState}
        toolbarStyle={{width:'100%'}}
        onEditorStateChange={(val) => this.handleDescriptionChange(val)} />

I am guessing it may be a styling issue, but I am unsure which style should be changed.

Thanks in advance for the help!

[jpuri]

Plz include css like this: https://github.com/jpuri/react-draft-wysiwyg/blob/master/docs/src/index.js#L15

[shivarajalagond]

@dahudson88 : Jyoti is right, you can include the css and it should be fine.
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

@jpuri: You can close this issue, it would be easy for you to keep track of open issues.

[machineghost]

This could be done better in the documentation. Numerous code examples leave off this (essential) line:

import '../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

I hope this isn't a controversial statement, but code examples should not leave out essential code.

Also, I should note that the import path in that import is ... odd. The only reason to do it that way is if you're importing from within the library itself ... but the way anyone reading the docs would do it would be:

 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'