Request: Allow CMS to be embedded in a UI

[Undistraction]

Is your feature request related to a problem? Please describe. We are looking to add a header above the CMS containing some branding and info about which branch the CMS is currently editing.

Currently it is possible to edit the index.html and use a container with the id nc-root to control where the cms is loaded, however due to the architecture and styles used in the CMS (they use 'position: static`) it is impossible to define any UI above or below the CMS as it will be immediately obscured by the CMS which fills the entire body.

Describe the solution you'd like It would be great if the CMS respected the bounds of its containing element, or offered some other way to include a header and footer above and below.

Describe alternatives you've considered The only option is to also use position:static and overlay any new UI, which looks awful.

Additional context

[cjbrooks12]

A little additional context for this that I am running into trying to do the same:

The header is using positioning: fixed, but should be either relative or absolute. (static positioning is actually the element's default, and is not causing the issue). It looks like the following CSS fixed that issue for me, but I'm not quite sure how to translate this to the actual app CSS, since the classnames are dynamically generated.

#nc-root header > div {
    position: relative !important;
}
#nc-root header + div > div > div > div:first-child {
    position: absolute !important;
}

There may be other elements using fixed positioning that need to be changed as well, I haven't explored it too much. Also the #nc-root element should have position: relative by default, as just using the #nc-root by itself won't position all the absolute elements within it, and all CMS styling should be scoped within the #nc-root element to prevent its styles from leaking out and affecting the rest of the page it is embedded in.

@erquhart I would be happy to fix these issues if I could get some pointers to the relevant files in this project. I've never actually worked with React, but from my poking around at the source, it should be pretty straightforward once I know where to look.

[erquhart]

Not sure of the best alternative would be, maybe position: sticky?

The code in question is here: https://github.com/netlify/netlify-cms/blob/f22c4dbd96928d2da28361cca12c8e307cf60246/packages/netlify-cms-core/src/components/App/Header.js#L28-L36

[Ananthakr]

Is this issue still active?

[erquhart]

Sort of - we have every intention of distributing the Netlify CMS core as a React component (rather than an SPA, although that distribution will also be available), at which point it would no longer take over the page. Definitely happening, just a matter of when.

[Ananthakr]

Awesome. Would like to contribute whenever that happens.

[erquhart]

If you want to make it happen, feel free to propose an approach. The maintainers aren't working on it right now, but I'll definitely advise where needed if you want to tackle it.

_{Sent with GitHawk}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.