Starting a couple of weeks ago....on some of our sites, but not all, when inspecting an element, the styles tab only shows the "styles box", but not the actual styles relating to css?? - Again, this is ONLY on some sites - weird
It should look like this (with styles showing on the right relating to css)
BUT......instead, on SOME of our sites, this just started a couple of weeks ago looking like this....with no css showing in the styles tab:
NOTE: it has worked for 2 years - The page looks fine and all styles are being applied to the DOM, but do NOT show up in the styles tab when inspecting element.
Any ideas??
I just had this same issue and to resolve it I went into Chrome Developer Tools -> Settings -> Scroll to the bottom and click "Restore defaults and reload" then it all magically came back!
I hadn't changed anything between it working and when it stopped so not sure why it broke but hopefully this helps you too.
I just close the tab, and reopen it, and then right click > inspect element. Don't need to restore the whole dev tools to default settings. It's a waste. Try it, it works! :)
I had to go to Chrome Developer Tools -> Settings -> Enable JavaScript source maps and then disable that checkbox. It has probably got do with sourcemaps and the fact that I'm building the scss to css.
something that worked for me: chrome:flags>Enable Developer Tools experiments>Disable. I had enabled it at some point, used it for years w/o issue, then could not see any style details as OP described. After updating, resetting devtools prefs to default, even trying incognito, this was the one thing that seemed to get it working again. There were some neat experiments, but i'd much rather be able to do my job...
I was also facing this problem, in addition to the suggestions the other users made it worked for me accessing:
Chrome Developer Tools -> CSS -> Relaoad Linked Style Sheets
Image Ilustrating the procedure
Another one for the mix - using CSS variables but one of the variables was referencing another variable that didn't exist.
Elements using that missing variable in the chain just don't show up in chromium at all (it hid all references to h2s in the case of my site).
Interestingly, it still shows the elements in Firefox's dev tool panel.
Look for errors in the CSS file, in my in my case it was on the global CSS variables, fixing the errors solved the problem.
This tool can help you find the errors:
https://jigsaw.w3.org/css-validator/
I was just having the same odd issue. I'm not 100% sure what triggered this to happen but we use build tools to build SCSS into CSS. I went into my CSS file and removed the source map reference -
/*# sourceMappingURL=myCSS.map */
And all of the sudden it started showing up again. Then I added it back and I can still see it. I am not sure if this is because a version of the map is cached now or not but this worked for me.
Even i faced this issue !!!
style.css file was causing this issue..
I just created a new css file (Ex: style1.css) and cut pasted the older css file content (all lines in style.css) to style1.css file. It works
Note: Don't forget to update link tag, which is loading css file.
I think your CSS files are not loaded properly. Just check the syntax for referencing the external stylesheets.
It should be like this
<link rel="stylesheet" type="text/css" href="mystyle.css">
If you are skipping the rel="stylesheet", browser may think it as a plain file. To confirm the loading of stylesheets go for Chrome Inspector -> Sources
Check the site resources
No need of resetting anything. Hope it helps :)
I use Dreamweaver and Breckets.
Could see that the problem occurred only when I used Dreamweaver.
Solved the problem by changing Dreamweaver's preferences
--> Code Format --> Line Break Type --> CR LF (Windows)
Sometimes it can be the server!
I just had this error on a page that appeared to be fully loaded but the style panel was completely empty.
A complete restart of Chrome (and verifying no processes) did not work.
Restarting my server (in this case a .NET Core app running locally in Visual Studio) then allowed the style panel to show.
I think there was some sort of connection leak or web socket limit - something of that nature which was confusing Chrome.
I think this may helpfull.. If it is an angular project > then simply run
ng serve --extract-css.
Related
We upgraded a TYPO3 installation from 8.7.x to 9.5.19.
Afterwards, the User-Icon dopdown in the top toolbar is missing. (see screenshots)
We found out that the toolbar is generated in this class:
/typo3/sysext/backend/Classes/Backend/ToolbarItems/UserToolbarItem.php
We see that there have been lots of changes here since v7.6 but don't know where to go from there.
Is there a configuration file, where the items in the top bar are noted?
Additional information: we are working with the typo3-themes extension and have worked with our own theme before the update. During the update we switched to the bootstrap4 + bootstrap4-child theme - would this be a starting place for further investigations?
Before upgrade:
After upgrade:
UPDATE: It seems like this was at least not the root of the problems. After reactivating typo3_console the user-icon was still visible. So it looks like we have further investigating to do.
Update (2 Days later):
We can't reproduce the error. My best guess for now is, that deactivating the extension "repaired" a corrupt configuration file which had caused the disappearing of the user settings icon. After a lot of researching i have not found anybody with a similar problem so this might be an edge case. I wish i could offer more insight to this.
Thanks to Peter Kraume's basic suggestions i found the answer: after i deactivated the extension typo3_console it immediately worked!
Just for the record, here are the other steps we tried:
BE (via top bar)
Flush frontend caches
Flush all caches
BE Admin Tools ("Maintenance")
Flush TYPO3 and PHP Cache
Remove Temporary Assets
Logs
BE System log shows no current errors
Shared Hosting, /var/ contains no logs, /logs/ contains ftp and access logs
Hosting Provider Backend
Cleared OPcache
Created a new Admin-User, logged in, same behaviour
Tried on two different PCs
Primarily tested on Firefox 77.01, checked with Chrome 83.0.4103.116
Extensions:
was not sure, which extensions might manipulate the topbar - deactivated typo3-console, because i remembered seeing some error during the upgrade process. My feeling was more like: i don't need this right now, so i could as well deactivate it. 1 second later, the user drop-down reappeared. Unbelievable! Thanks for reminding me of the basic stuff - like turning off things!
We just had the same problem after upgrade from TYPO3 8 to 9. I have compared the working BE-User with the non-working BE user. They differ in given Language. Working BE-User has lang=''. Non-Working BE-User lang='de'. After switching the working BE-User to lang de, too, the UserToolbar is gone. I have updated the languages in Maintenance-Module and now everything works as expected.
Solution for us was to disabling the "belog" extension.
I had the same problem and I could solve it on all systems with:
Install-Tool > Maintenance > Manage Language Packs > Download the files again.
In XPages, when I try to open a .js or .jss file, I often get just the tab wirh "Client/Server JS Editor" and nothing else, i.e. the file doesn't load. From the Navigator Eclipse view, I can open the same .js or .jss file using any other editor without problems. And then, it sometimes works, but I don't know yet when it does and when it doesn't. The other Editors are okay by the way, .lss opens nicely.
This behaviour I get for a few weeks now. Since it started I reinstalled Notes a few times, I upgraded to FP8, I also reinstalled Windows10 and Windows10 upgraded me to the Creators Update (with the fix, in the end). There's nothing that explains to me why the file doesn't show up on the screen.
Anyone familiar with this? Could you please tell me how to repair this?
Thanks!!
It's a bug introduced with FP8 that is fixed in FP8 Interim Fix 1. See this document for download options for FP8 IF1.
As a workaround you can do a clean/rebuild of the nsf and then use the SSJS editor.
why does this happen? I'm using eclipse neon.1 and tried changing the color of the font in the CSS3 code and it worked on both internal browser and IE9, but not on chrome. I restarted the server a lot of times and even rebooted the computer but it still won't be applied on Chrome....
Right click on the text and go to inspect element, see if it shows newly applied style in styles section in developer tools. If not you may need to clear cache using Ctrl+Shift+Delete and reload the app.
I sometimes have problems loading java script and CSS, and i think that Url.ThemedContent is the culprit.
Everything will work perfect, but if I refresh my page multiple times fast (CTRL + R in chrome) to clear my js-cache, for some reason it just crashes my file loading.
It says that /N2/Resources/..... cant be found, and it messes the page up completely, only way to fix it is to change the web.config so that the page recycles.
Try using the N2.Management.NoZip package. If that doesn't work, it sounds like a bug, so file an issue at http://github.com/n2cms/n2cms so that the developers will fix it.
I'm running Plone 4.1.4 and when I try to edit a text area that used to display the tinyMCE editor all I get is a dialog box listing a dict of "valid elements". I installed the kupu editor and that works fine, but I prefer tinyMCE. Has anyone run in to this issue? Any help would be greatly appreciated.
Browser and version? IE 9 has TinyMCE issues, and requires you to use a development release.
To get around it I had to install a version from github. If you have mr.developer, use:
Products.TinyMCE = git https://github.com/plone/Products.TinyMCE.git branch=GSOC-3.4.x
I have come across this problem as well. In my case I updated Plone 4.1.2 to Plone 4.1.4. The rich widget will not show the TinyMCE editor when the content type has just been added. But after saving the content type and then editing, TinyMCE would appear as expected.
The weird thing is that if you add a new Plone instance and then activate and add your custom AT content type. TinyMCE would render fine on your text fields.
A work around that seemed to solve the issue is to go to portal_setup and on the upgrade tab, select Products.TinyMCE:TinyMCE to upgrade. It would show that the profiles (version 3) on the ZODB and the filesystem are in sync. You can downgrade by clicking on "show old upgrades" and running upgrade profile 1.1->2. This worked for me but please try this on a development instance.
This looks exactly like a problem I had a few days ago. Are you using IE7 or below?
Though I don't know if this is the right way to go (more experienced devs, please advise), this is what I did:
(Assuming a windows box... )
Stopped the plone services
located the file on the filesystem called tiny_mce_init.js (in my case c:\Plone41\eggs\products.tinymce-1.2.10-py2.6.egg\Products\TinyMCE\skins\tinymce\tiny_mce_init.js)
go to line 93 (in my case this contains:
media_strict: false,
remove the comma resulting in media_strict: false
save the file
restart the services
Looks at Thariama's answer here.
I had the same problem (with IE and FF). It looked like the archtype installation was the problem.
After changing the order unter "ZMI->portal_skins->Sunburst Theme" (putting tinymce above archetypes), TinyMCE worked.
(http://plone.293351.n2.nabble.com/Tinymce-not-working-after-custom-type-is-installed-td7566873.html)