Skip to content
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

Open
camdenvaughan opened this issue May 5, 2024 · 0 comments · May be fixed by #7198
Open

Editor Does not respect Custom Mount Element #7197

camdenvaughan opened this issue May 5, 2024 · 0 comments · May be fixed by #7198
Labels
type: bug code to address defects in shipped code

Comments

@camdenvaughan
Copy link

camdenvaughan commented May 5, 2024

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
Decap_Screenshot_1
With Fix (Changing ToolbarContainer Position from fixed to absolute)
Decap_Screenshot_2

Applicable Versions:

  • Decap CMS version: 3.1.10
  • Git provider: Github
  • OS: Windows 11
  • Browser version Chrome 124.0.6367.119
  • Node.JS version:

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:

  • name: "blog"
    label: "Blog"
    folder: "src/content/blog"
    create: true
    fields:
    • { label: "Title", name: "title", widget: "string" }
    • { label: "Publish Date", name: "date", widget: "datetime" }
    • { label: "ogImage", name: "ogImage", widget: "image" }
    • { label: "Description", name: "description", widget: "string" }
    • { label: "Body", name: "body", widget: "markdown" }

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.

@camdenvaughan camdenvaughan added the type: bug code to address defects in shipped code label May 5, 2024
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
@camdenvaughan camdenvaughan linked a pull request May 6, 2024 that will close this issue
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug code to address defects in shipped code
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant