-
-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Editor Does not respect Custom Mount Element #7197
Labels
type: bug
code to address defects in shipped code
Comments
camdenvaughan
added a commit
to camdenvaughan/decap-cms
that referenced
this issue
May 6, 2024
Changed ToolbarContainer's position element to be absolute - decaporg#7197
1 task
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
I followed the docs to mount decap in a div using id="nc-root". I did this so that I could add a header and a footer, but I realized that once I entered the editor page some weird behavior would happen. This seemed to be because the editor toolbar would remain fixed outside of this root div, while the rest of the elements stayed inside. This covered my custom header as well as messed up the normal Decap UI by showing the header from the decap home page. I believe I have found a fix (Switching ToolbarContainer position from fixed to absolute, I detailed it in the additional context and provided a screenshot)
To Reproduce
Add a div with id="nc-root"
create a div above that (i gave it a class of "header")
style the header to have a width of 100% and a height (I used 50px)
Optionally you can place all of it inside of another div that does not take up the entire page to better demonstate that the header goes outside of the bounds of this root div. (In my screenshots I did this and gave it a green background)
Expected behavior
I expected for the entire cms to stay inside of this root element.
Screenshots
Without Fix
With Fix (Changing ToolbarContainer Position from fixed to absolute)
Applicable Versions:
CMS configuration
backend:
name: git-gateway
repo: camdenvaughan/decap-test
branch: main
local_backend: true
media_folder: src/assets/img
public_folder: src/assets/img
collections:
label: "Blog"
folder: "src/content/blog"
create: true
fields:
Additional context
I believe I have found a fix for this already. In the inspector window I could change the position of this toolbar from fixed to absolute and it solved everything. I forked the repo, found where this is in decap-cms\packages\decap-cms-core\src\components\Editor\EditorToolbar.js and changed the style of "ToolbarContainer" from fixed to absolute. I am new to all this, I have never done a pull request before, and I don't know if there needs to be any tests done for this, but I would be happy to help with fixing this.
The text was updated successfully, but these errors were encountered: