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).

2 Attachments

AllisonFewtrell
 
AllisonFewtrell replied on at Permalink Reply 1 Attachment
AllisonFewtrell
Using dev tools inspect I altered the CSS for these items - it's a bunch of tabs stacked ontop of one another - so I've spread them out and attached another screenshot.
Does anyone know what this is and how to get rid of it please?
Many thanks
Allison
mnakalay replied on at Permalink Reply
mnakalay
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?
AllisonFewtrell replied on at Permalink Reply
AllisonFewtrell
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
AllisonFewtrell replied on at Permalink Reply
AllisonFewtrell
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 :(
mnakalay replied on at Permalink Reply
mnakalay
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.
AllisonFewtrell replied on at Permalink Reply
AllisonFewtrell
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:
<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.
mnakalay replied on at Permalink Best Answer Reply
mnakalay
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.
AllisonFewtrell replied on at Permalink Reply
AllisonFewtrell
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?
mnakalay replied on at Permalink Reply
mnakalay
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.
AllisonFewtrell replied on at Permalink Reply
AllisonFewtrell
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 :)
mnakalay replied on at Permalink Reply
mnakalay
My pleasure :)