Strange ui items in edit mode - can't get rid of them!
Permalink
Hi,
I've nearly finished this website, but logged in today and noticing tabs and button 'floating' over the header area when in edit mode - I don't know where they are coming from.
I have cleared the cache but it's still there - I did a screenshot of the page with a red circle around the floating items and a screenshot of the inspector when I selected the item - it's something to do with a ui interface.
Has anyone seen anything like this before?
Thanks
Allison
Other information:
# concrete5 Version 8.5.1
# concrete5 Packages
Background Image and Overlay (0.9.9), Database Dumper (1.1.0), HTML5 Audio Player Basic (2.0.7), Magic Tabs (7.2.3), Salix (1.1.0), Ts4se (1.2.2), Webli Content PopUp (2.1)
# concrete5 Overrides
None
# concrete5 Cache Settings
Block Cache - Off
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).
I've nearly finished this website, but logged in today and noticing tabs and button 'floating' over the header area when in edit mode - I don't know where they are coming from.
I have cleared the cache but it's still there - I did a screenshot of the page with a red circle around the floating items and a screenshot of the inspector when I selected the item - it's something to do with a ui interface.
Has anyone seen anything like this before?
Thanks
Allison
Other information:
# concrete5 Version 8.5.1
# concrete5 Packages
Background Image and Overlay (0.9.9), Database Dumper (1.1.0), HTML5 Audio Player Basic (2.0.7), Magic Tabs (7.2.3), Salix (1.1.0), Ts4se (1.2.2), Webli Content PopUp (2.1)
# concrete5 Overrides
None
# concrete5 Cache Settings
Block Cache - Off
Overrides Cache - Off
Full Page Caching - Off
Full Page Cache Lifetime - Every 6 hours (default setting).
Hello,
The labels correspond to Concrete5's left side menu when clicking on the cog button. The markup, however, is not right.
I suppose you only see that when logged in?
The labels correspond to Concrete5's left side menu when clicking on the cog button. The markup, however, is not right.
I suppose you only see that when logged in?
Hi yes, only visible when logged in!
Can you give me any pointers as to where I might start looking to see what's happened?
Many thanks
Allison
Can you give me any pointers as to where I might start looking to see what's happened?
Many thanks
Allison
Hi again,
The whole editing interface is behaving strangely. Some blocks can't be edited at all.
In the Page Settings area (the cog icon), many of the items do not respond when clicked.
I think I am going to have to do a fresh install of C5 maybe? Maybe I will try v8.5.2. Really at a loss to know what I've done wrong :(
The whole editing interface is behaving strangely. Some blocks can't be edited at all.
In the Page Settings area (the cog icon), many of the items do not respond when clicked.
I think I am going to have to do a fresh install of C5 maybe? Maybe I will try v8.5.2. Really at a loss to know what I've done wrong :(
Don't worry too much there are things you can try before resorting to a new install and it looks like a purely CSS issue so a new install might not even be the solution.
The first thing to do is click on one of the floating elements to inspect the CSS affecting it in the browser's developers tool. You are looking for any CSS that belongs to your theme or to a block or block's template or inline CSS. If you see anything like that it's probably your culprit.
The Core UI should never be affected by anything outside of its own CSS.
If you're not sure how to do that and you'd like me to have a look for you don't hesitate to ask.
The first thing to do is click on one of the floating elements to inspect the CSS affecting it in the browser's developers tool. You are looking for any CSS that belongs to your theme or to a block or block's template or inline CSS. If you see anything like that it's probably your culprit.
The Core UI should never be affected by anything outside of its own CSS.
If you're not sure how to do that and you'd like me to have a look for you don't hesitate to ask.
Hello again! Thanks for helping - I think I might have identified what's causing the problem.
One of the last things I added to the content was an interactive table with drag and drop items that could be moved to different columns/rows.
I found one that someone had done in jsFiddle and they had used jQuery UI, so I had put a link to it in my footer:
When I commented that out, the 'extra items' disappeared!
Trouble is, my drag n drop tables don't work any more :(
I have downloaded jquery-ui.js and I am going to see what happens if I add it to my js folder instead.
One of the last things I added to the content was an interactive table with drag and drop items that could be moved to different columns/rows.
I found one that someone had done in jsFiddle and they had used jQuery UI, so I had put a link to it in my footer:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
When I commented that out, the 'extra items' disappeared!
Trouble is, my drag n drop tables don't work any more :(
I have downloaded jquery-ui.js and I am going to see what happens if I add it to my js folder instead.
Here's the thing c5 uses jQuery UI for parts of its interface so when not logged in feel free to use your own version.
When logged in it's a bit more complicated.
jQuery UI is made of a core and modules. C5 includes the core and some of the modules but not all.
So look for C5 version of jQuery UI and at the top as a comment you should see a list of the modules included. When logged in load only the modules you need that are not already loaded by C5.
Alternatively you might not need the drag and drop functionality to work when logged in so you might just load what you're already loading but only when logged out.
When logged in it's a bit more complicated.
jQuery UI is made of a core and modules. C5 includes the core and some of the modules but not all.
So look for C5 version of jQuery UI and at the top as a comment you should see a list of the modules included. When logged in load only the modules you need that are not already loaded by C5.
Alternatively you might not need the drag and drop functionality to work when logged in so you might just load what you're already loading but only when logged out.
OK, loading locally gave the same result - BUT, I did spot jquery-ui already exists in concrete/js
I noticed that bootstrap.js is loaded in the header, so I tried loading my new ui.js below that instead, and the extra tabs are gone, and my drag & drop tables are still working.
Do you think it is OK to do this? Seems to be fine now?
I noticed that bootstrap.js is loaded in the header, so I tried loading my new ui.js below that instead, and the extra tabs are gone, and my drag & drop tables are still working.
Do you think it is OK to do this? Seems to be fine now?
I'd say as long as it seems fine keep an eye on things.
Now that you know it's just a script issue you know any problem can be solved without any drastic solutions.
Could you share that codepen you got the code from? I'd like to have a look.
Now that you know it's just a script issue you know any problem can be solved without any drastic solutions.
Could you share that codepen you got the code from? I'd like to have a look.
Sure - just found it - it was actually stack overflow, I think I tried a few different things before I could get one to work how I wanted ;)
https://stackoverflow.com/questions/31116519/drag-and-drop-table-mov...
Thanks for your help :)
https://stackoverflow.com/questions/31116519/drag-and-drop-table-mov...
Thanks for your help :)
My pleasure :)
Does anyone know what this is and how to get rid of it please?
Many thanks
Allison