Block Controller Form appears off page
Permalink
For the last few sites I have been working on in 5.7.3.1, the block controller overlay forms (insert image, auto-nav, etc.) have been appearing off page. While this is a minor inconvenience for me it is a complete bust for our clients. Here are some screenshots of what is happening. As far as I can tell the jquery is giving the element a large number, but I don't know where to look in the file structure to fix this.
Any help would be appreciated. Thanks!
EDIT - If I adjust the "top" property in browser dev tools by adding a decimal before the last number it puts the controller window right in the center of the page.
Any help would be appreciated. Thanks!
EDIT - If I adjust the "top" property in browser dev tools by adding a decimal before the last number it puts the controller window right in the center of the page.
First off, thanks for the reply.
Second, I checked the elemental style and it appears to be fine. However I rescoped the css by adding a wrapper in the markup and then adding the corresponding class to all css styles. This didn't fix the issue though. the block control form is still appearing exactly 10x too far down the page.
Third, taking the above actions made me think that perhaps having a top value on my body is causing the issue. I have a fixed header, so I adjusted my content by pushing down my body. I have since rewrapped everything outside of my header and pushed it down, then I tried inserting a ghost div with a min-height equal to what I needed my content pushed down by. None of the above fixed the block control form. It still has exactly 10x the value it should have under the top property.
Fourth, after failing to fix it for several hours, I have attempted to disable all of my theme css. Even without a single line of css or jquery the site is having the same issue.
Second, I checked the elemental style and it appears to be fine. However I rescoped the css by adding a wrapper in the markup and then adding the corresponding class to all css styles. This didn't fix the issue though. the block control form is still appearing exactly 10x too far down the page.
Third, taking the above actions made me think that perhaps having a top value on my body is causing the issue. I have a fixed header, so I adjusted my content by pushing down my body. I have since rewrapped everything outside of my header and pushed it down, then I tried inserting a ghost div with a min-height equal to what I needed my content pushed down by. None of the above fixed the block control form. It still has exactly 10x the value it should have under the top property.
Fourth, after failing to fix it for several hours, I have attempted to disable all of my theme css. Even without a single line of css or jquery the site is having the same issue.
In your initial post, you mention that you have multiple sites that all have the block forms positioned off the page. Are they all based off the same custom theme?
Just to clarify, when you switch to the Elemental theme, are the block forms positioned off page or are they centered like expected?
When you disabled the theme CSS, did you clear the cache before you checked to see if the problem was still there?
Did you try commenting out all your JavaScript assets?
Also, are your theme assets registered?
Just to clarify, when you switch to the Elemental theme, are the block forms positioned off page or are they centered like expected?
When you disabled the theme CSS, did you clear the cache before you checked to see if the problem was still there?
Did you try commenting out all your JavaScript assets?
Also, are your theme assets registered?
Yes, it has happened to other sites, but never to this extent. Usually it is just a jQuery conflict stemming from having 2.x linked (or at least removing this fixes it).
As far as the elemental theme, it loads perfectly. I have also loaded in several other themes I have developed and they are loading perfectly as well.
When you disabled the theme CSS, did you clear the cache before you checked to see if the problem was still there? - Yes
Did you try commenting out all your JavaScript assets? - Yes
Yesterday afternoon I stripped out all of the css, jquery, html classes, html ids, semantic tags (replaced with div) and all but one editable block. This didn't fix the issue, as I removed more html the form was moved up the page until it eventually fixes itself when I am at around 20 lines of html. I have tried deleting different sections of the html and each one reacts exactly the same.
After spending a few more hours with it, I was able to get a senior developer in to look at the issue. He suggested I rewrite the entire page using a different text editor and ftp. He believes that Coda2 is causing the issue either in the actual document or in the upload.
Also, are your theme assets registered? - Don't believe so.
I will reply again after I have tested a fresh version of the theme. If that fixes it then the issue would have to my my editor/ftp.
As far as the elemental theme, it loads perfectly. I have also loaded in several other themes I have developed and they are loading perfectly as well.
When you disabled the theme CSS, did you clear the cache before you checked to see if the problem was still there? - Yes
Did you try commenting out all your JavaScript assets? - Yes
Yesterday afternoon I stripped out all of the css, jquery, html classes, html ids, semantic tags (replaced with div) and all but one editable block. This didn't fix the issue, as I removed more html the form was moved up the page until it eventually fixes itself when I am at around 20 lines of html. I have tried deleting different sections of the html and each one reacts exactly the same.
After spending a few more hours with it, I was able to get a senior developer in to look at the issue. He suggested I rewrite the entire page using a different text editor and ftp. He believes that Coda2 is causing the issue either in the actual document or in the upload.
Also, are your theme assets registered? - Don't believe so.
I will reply again after I have tested a fresh version of the theme. If that fixes it then the issue would have to my my editor/ftp.
Registering your theme assets can help prevent asset conflicts.
I recommend reading this documentation on registering assets.
http://www.concrete5.org/documentation/developers/5.7/designing-for...
I recommend reading this documentation on registering assets.
http://www.concrete5.org/documentation/developers/5.7/designing-for...
Ok, so after completing some other projects I was able to return to this issue. After getting a fresh pair of eyes on it I have figured out that it is a jQuery UI issue. I am looking into a nonhacky fix that will play nice with the rest of the ui components.
Are you using a custom theme?
My first thought is that you have CSS in your theme that is overriding the CSS of the concrete5 interface.
One way to test for this is to switch to the default Elemental theme. If the problem goes away when using Elemental, then you know it is probably a theme issue.
Greedy Styles
https://www.concrete5.org/documentation/developers/5.7/designing-for...
Easily scope CSS using LESS or SASS
http://www.concrete5.org/documentation/how-tos/designers/easily-sco...