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)
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.
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:
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.