codex-team / codex-team/editor.js

Possible issue with a block's content margin

Open
#2,498 0 comments 2 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
31.9k
Forks
2.2k
Avg merge
1d 1h
Merged PRs (30d)
1

Description

### Discussed in https://github.com/codex-team/editor.js/discussions/2494

Originally posted by **VikhorKonstantin** September 25, 2023
I'm not sure what the supposed behavior is, but for me, it seems like a bug:
If I embed EditorJS in a wide container (not a 'narrow' mode), toolbar actions are displayed outside of this container:
![image](https://github.com/codex-team/editor.js/assets/52427793/3a0b86b7-ff4f-4d39-98bf-615ffffaf264)

HTML:
```




```

CSS:
```
.holder {
width: 700px;
margin: auto;
border: 1px solid red;
}
```

JS:
```
const editor = new EditorJS({

holder: 'editorjs'
});
```

Possible solution:
```
@media (width >= 651px)
.codex-editor:not(.codex-editor--narrow) > .codex-editor__redactor > .ce-block .ce-block__content,
.codex-editor:not(.codex-editor--narrow) > .ce-toolbar > .ce-toolbar__content
margin-left: 50px
```

where `@media (width >= 651px)` can be replaced with `@media (--not-mobile)` and `50px` can be replaced with a new variable defined in "variables.css".

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.