Page Changes Destroy Layout

[g_shipman]

Since around the introduction of the new HTML and Rich Text Editor for Pages, the layout of one of our courses has ben crippled.  We spotted the issues on 8th September this year, although they may have occurred earler as the course was inactive at the time.  We were using an alternative menu structure to overlay the left hand menu (Home, Modules, etc.) and the top breadcrumb trail.  This worked exactly as we had hoped until a change in the page layout ocurred.  During page load the menu appears in the correct position but is then moved as the page loads further.

I have been back and forth with Instruture Support for the past 7 weeks.  All they have tried is to point fingers at me but then disengage when their assertions are shown to be incorrect (at one point accusing me of pirating their code through the Consol).  Then they return to their fall back position, saying they don't support custom HTML or CSS.  They told me that "we began enforcement of the banned html tags" (but then refused to identify those tags in my code, just directing me to the list of allowed HTML) and one of them let slip that they "are stopping any interface elements being overlayed" but then said no more when asked to expand on the statement. They also say that nothing has happened on the platform that they are aware of that could cause this issue (make your minds up please).  None of this gives me faith in their technical ability, nor in their desire to support users.  Their claim to be "working hard to meet the needs of all Canvas users" is clearly not true in this case.

The clearest change that we are seeing is that the 0,0 position on the page is being changed during load and that our menu elements that previously could overlay Canvas elements are now forced behind them. Any help in resolving this issue would be gratefully received.

[g_shipman]

Since around the introduction of the new HTML and Rich Text Editor for Pages, the layout of one of our courses has ben crippled.  We spotted the issues on 8th September this year, although they may have occurred earler as the course was inactive at the time.  We were using an alternative menu structure to overlay the left hand menu (Home, Modules, etc.) and the top breadcrumb trail.  This worked exactly as we had hoped until a change in the page layout ocurred.  During page load the menu appears in the correct position but is then moved as the page loads further.

I have been back and forth with Instruture Support for the past 7 weeks.  All they have tried is to point fingers at me but then disengage when their assertions are shown to be incorrect (at one point accusing me of pirating their code through the Consol).  Then they return to their fall back position, saying they don't support custom HTML or CSS.  They told me that "we began enforcement of the banned html tags" (but then refused to identify those tags in my code, just directing me to the list of allowed HTML) and one of them let slip that they "are stopping any interface elements being overlayed" but then said no more when asked to expand on the statement. They also say that nothing has happened on the platform that they are aware of that could cause this issue (make your minds up please).  None of this gives me faith in their technical ability, nor in their desire to support users.  Their claim to be "working hard to meet the needs of all Canvas users" is clearly not true in this case.

The clearest change that we are seeing is that the 0,0 position on the page is being changed during load and that our menu elements that previously could overlay Canvas elements are now forced behind them. Any help in resolving this issue would be gratefully received.

[bbennett2 · Accepted solution]

Canvas has been migrating to dynamic page generation with React elements rather than traditional HTML, which causes weird issues with layout. It's generally an issue because if you're using div IDs or classes to insert your own HTML, those elements don't exist when the page loads and are "hydrated" with data as React components are added to the page. Classes also change on HTML each time webpack (or similar build tool) rebuilds the source.

There have been a couple other posts that I remember and I think the only real way to get content injection is to use a MutationObserver in Javascript. Here's an example of updating the global navigation. This watches the page for changes and then fires off events in response. In your case, I don't know if that's 100% helpful, but it may be a place to start.

[g_shipman]

Thank you so much for this response.  I have been communicating with Canvas support about this for a couple of months now and dynamic page generation with React elements makes total sense to what I am seeing.

Unfortunately, I have not been given any rights to upload javaScript, so despite your suggestion sounding interesting, I'm not sure there is much I can do with it.

However, that doesn't take away from the fact that you are the first person to make any sense on this issue, I thank you unreservedly!