currently, I am learning Bootstrap 4 at ASP.NET MVC project (only change index.cshtml, nothing else) in JetBrains Rider and I have some weird problem I can`t deal with.
Every day when I start to write new code in HTML it seems to be okay - dotnet watch run works great, inline styling is okay. But when I change site.css it doesn't see changes, I don't know why. After some time it fixes itself randomly (weird but ok), for example, yesterday I couldn't do anything with CSS until I ran the project in JetBrains Rider, but now it doesn't work. Two days ago it fixed itself when I wasn't using my computer (xD). Do you have any idea what's going on or how to fix it? I didn't find anything interesting on Google
P.S. I updated JetBrains IDE to the latest version but nothing is changed
Its browser-cache related. You should cache bust your css file ( add rand number or guid at the end of your css stylesheet declaration, ex : <link rel="stylesheet" href="style.css?v=3.4.1"> 3.4.1 should be generate randomly. ). Before doing that, you can also clear-cache or hard reload your page and you should see your changes.
Take a look at : https://css-tricks.com/strategies-for-cache-busting-css/
Related
After some update to either Visual Studio (I have the same issue in both VS2019 and VS2022) or Chrome I can no longer update the CSS in DevTools and have it reflect and persist the changes to site.css file in my project. Instead when I try to change a CSS property I get the following in the DevTools console:
Unable to find a stylesheet to update. Updating all local css files.
15:54:01.800 aspnetcore-browser-refresh.js:82
And the green dot disappears from my CSS pane immediately after I hit the up or down arrow on my keyboard to try and change the CSS value.
Why is that? It used to work not too long ago. I think it's been broken for me for half a year or so now.
I've been googling but haven't find any good resources. Or maybe I'm the only one coding directly in Chrome? :) Surely this can't be the case?
If anyone knows a workaround please share because I'm really frustrated atm :)
Disabling "Enable CSS Auto-Sync" seems to do the trick.
Update 1: The above no longer works for me for some reason. I managed to find another fix on SO: https://stackoverflow.com/a/70096917/687549
And here are some screenshots:
Update 2: Update 1 works when you only need to update the CSS directly in Chrome. It's better to have Hot Reload enabled and the set the following setting to None - then you'll get the best of both worlds (Hot Reload + Edit CSS directly in Chrome using workspaces): https://stackoverflow.com/a/68954979/687549
Update 3: I'm now using VSCode. If none of the above works try the following (block .js file in Network tab in Chrome DevTools): https://stackoverflow.com/a/68966524/687549
For the following website that I have made: ifrs.site (WordPress site with custom theme, if that's important), there is an overlap of content by the footer when the browser window is not maximised on desktop, or when viewed on mobile. I fixed this overlap issue in the dev environment, but the live website with the same CSS code as the dev website ends up with a worse overlap.
What is the cause in discrepancy? You can see the differences in code at this github repo: https://github.com/keg504/IFRS-Website-theme-files, in the 2 branches dev-files and master. What is on master is what is used on the site currently.
I'm using Local by Flywheel for the dev environment on Windows 10, and the CSS is run using a webpack configuration on nodejs.
Edit: As Aliqua has requested, I've added the wp_enqueue_style function I'm calling to load the CSS: wp_enqueue_style('our-main-styles', get_theme_file_uri('/bundled-assets/styles.ba56d060f11656536bc3.css'));
The part between styles...css changes whenever npm run build is run in the command line
Depending on your design/setup the css could have attached in the source code a ?ver=1.0.0 or similar. Which means if you have made changes but not updated the version it is still recalling the original file from the cache.
Some developers overcome this by setting the enqueue_script() version part of the array to a date() (including time with hour-min-sec) function. This will mean that everytime the page is refreshed the version is different and it wont recall older versions of the css from the cache.
Search your code for the enqueue script line for the css in question and see if you can set date() to the version value.
Refer to https://www.php.net/manual/en/function.date.php for more information.
Update:
Based on your update, you could replace it with something like this.
wp_enqueue_style( 'our-main-styles',
get_theme_file_uri('/bundled-assets/styles.ba56d060f11656536bc3.css'),
array( $parent_style ), // remove if there is no parent style
date("His")
);
Reference wp_enqueue_style - https://developer.wordpress.org/reference/functions/wp_enqueue_style/
Final Thoughts:
Please note, that this answer may in fact not be the actual solution as much as I have tried to identify your issue. Please refer to https://developer.wordpress.org/ to familiarise yourself with the introductory information in relation to wordpress development. If you are going to want to do more changes to your wordpress CMS, you will need a basic understanding of how to make changes. Please focus some of your research to plugin creation, working with child themes, and how to make your own custom functions. Then you will be able to write better questions, and be able to action the answers in the future.
Best of luck with your development.
This issue started occurring today: the menu links stop working intermittently (I try clicking, and nothing happens) and I can only get them to start working again by doing a few refreshes. Then again, after moving around the menu a few times, the links stop working.
I noticed this problem on the localhost and then, to test it, I uploaded the website to a webspace and the problem is still there (also tried two different computers, clearing cache, etc.).
The test page is here: http://toulouse.xardas.lima-city.de/en/
I have deactivated several plugins and tried retracing my steps to see if anything I did today could have caused it (I mainly worked on changing the image sizes on the main page in CSS), but I couldn't find the cause.
I have tried the trick where you re-save the permalinks once with a new structure, and then change them back to what they were again and save. That didn't help.
I'm at a loss.
Your problem its not related to plugins, your website has 2 critical javascript errors that show up on the console and they seem to be disabling your website Javascript:
jquery.min.js is no able to load.
masonry.pkgd.js is not able to load.
Both errors are occurring because WordPress its trying to load them from a local server of yours (127.0.0.1).
Since your website its not on a local server, you need to change the tag that refers to those scripts and update the src to the real address of those libraries.
You can need to make sure that this script:
<script type="text/javascript" src="http://127.0.0.1/wordpress/wp-content/themes/elisabethzeigt-topmenu/js/jquery.min.js"></script>
Gets replaced with this:
<script src="http://toulouse.xardas.lima-city.de/wp-content/themes/elisabethzeigt-topmenu/js/jquery.min.js"></script>
The only thing that was updated was the initial part of the src: "http://toulouse.xardas.lima-city.de/" instead of "http://127.0.0.1/wordpress/".
Remember: You should to the same to the other script tag of the masonry library.
If you don't know how to replace them: just search for "jquery" and "masonry.pkgd.js" in your functions.php file and you will find the lines of code.
There is a chance that you functions.php has a global variable with the path to your website and you can fix the issue updating that variable instead of the scripts.
When I make any changes to my CSS file, the changes are not reflected in the browser. How can I fix this?
The fix is called "hard refresh"
http://en.wikipedia.org/wiki/Wikipedia:Bypass_your_cache
In most Windows and Linux browsers: Hold down Ctrl and press F5.
In Apple Safari:
Hold down ⇧ Shift and click the Reload toolbar button.
In Chrome and Firefox for Mac:
Hold down both ⌘ Cmd+⇧ Shift and press R.
Try opening the style sheet itself (by entering its address into the browser's address bar) and pressing F5. If it still doesn't refresh, your problem lies elsewhere.
If you update a style sheet and want to make sure it gets refreshed in every visitor's cache, a very popular method to do that is to add a version number as a GET parameter. That way, the style sheet gets refreshed when necessary, but not more often than that.
<link rel="stylesheet" type="text/css" href="styles.css?version=51">
A good way to force your CSS to reload is to:
<link href='styles.css?version=1' rel='stylesheet'></link>
And then just increment the version number as you change your CSS. The browser will then obey. I believe Stack Overflow uses this technique.
I always use Ctrl+Shift+F5 out of habit, it should force a full-refresh including by-passing any http proxies you may be going through.
I had this issue. Turns out I completely forgot I had CloudFlare setup on the domain I was live testing on.
CloudFlare caches your JavaScript and CSS. Turned on development mode and BAM!
Do Shift+F5 in Windows. The cache really frustrates in this kind of stuff
This sounds like your browser is caching your css. If you are using Firefox, try loading your page using Shift-Reload.
Having this problem before I found out my own lazy solution (based on other people suggestions). It should be helpful if your <head> contents go through php interpreter.
To force downloading file every time you make changes to it, you could add file byte size of this file after question mark sign at the end.
<link rel="stylesheet" type="text/css" href="styles.css?<?=filesize('styles.css');?>">
EDIT: As suggested in comments, filemtime() is actually a better solution as long as your files have properly updated modify time (I, myself, have experienced such issues in the past, while working with remote files):
<link rel="stylesheet" type="text/css" href="styles.css?<?=filemtime('styles.css');?>">
The Ctrl + F5 solusion didn't work for me in Chrome.
But I found How to Clear Chrome Cache for Specific Website Only (3 Steps):
As the page is loaded, open Chrome Developer Tools (Right-Click > Inspect) or (Menu > More Tools > Developer Tools)
Next, go to the Refresh button in Chrome browser, and Right-Click the Refresh button.
Select "Empty Cache and Hard Refresh".
Since I found this thread having the same problem, 10 YEARS later, I'll add my own solution too. I use PHP most of the time, and rather than requiring the user to press unusual buttons to refresh the page, or myself to remember to bump a version number embedded in a link, I used the filemtime() function to get the modification time of the css file (as a unix timestamp), and then use THAT number as the parameter.
$FILE_TIME = filemtime("main.css");
$CSS_LINK = "main.css?version=$FILE_TIME";
While results in a URL like:
http://example.com/blah/main.css?version=1602937140
This entirely disables caching, since every time the page is refreshed, it will believe it needs to grab the CSS file again, changed or not... but that's far less frustrating than forgetting to manually update this trick and wasting time wondering why it isn't right. You can always remove it from a production server.
If you are using plain HTML, you could probably engineer a javascript wrapper or some such, but that's probably more trouble than it's worth.
Have you tried renaming the new version of your CSS to CSSv2.css and then directing your page to use that? If that solves the stale-file issue, then you're just experiencing non-refreshing files. If not, you've got bigger issues.
If you're using ASP.NET web forms, make sure that you are using the right theme:
I just spent about an hour trying to solve this!
Is this a local custom CSS file? Is this your website? Maybe you should clear your cache.
Also the last CSS declaration takes precedence.
I faced the same problem. Renaming the file worked for me.
The reason this occurs is because the file is stored in the "cache" of the browser – so there is no need for the browser to request the sheet again. This occurs for most files that your HTML links to – whether they're CDNs or on your server, for example, a stylesheet. A hard refresh will reload the page and send new GET requests to the server (and to external b if needed).
You can also empty the caches in most browsers with the following keyboard shortcuts.
Safari: Cmd+Alt+e
Chrome and Edge: Shift+Cmd+Delete (Mac) and Ctrl+Shift+Del (Windows)
Greetings.
I've got a web site project loaded into Visual Studio 2008. The .designer files for all of my ascx controls are not nested under the control in solution explorer, and when I reference something in that control in the code behind, I don't get intellisense.
I've checked the csproj xml file, and the 'compile' elements appear to be the same as those in my other projects where this is working correctly. An example looks like this:
<Compile Include="Default.aspx.cs">
<DependentUpon>Default.aspx</DependentUpon>
<SubType>ASPXCodeBehind</SubType>
</Compile>
<Compile Include="Default.aspx.designer.cs">
<DependentUpon>Default.aspx</DependentUpon>
</Compile>
I've tried playing with the project file, using the Website\Nest Related Files menu command, and everything else that I can think of. Any ideas?
UPDATE
Note that I'm trying to nest files that should be nested already.
This is a response to my own previous post. Got MS Tech Support to straighten it out. On my .aspx pages changing line one in 2 places solved the issue for me.
In the line in each .aspx file in your project that starts "<%Page Language" change "Codebehind=" to "Codefile=", and in your "Inherits=" property if it's set up as ProjectName.FileName then remove the "ProjectName.".
For example if you had a Project named "TestApp" and a file inside it called "NewFunctionalityTest.aspx" change
Inherits="TestApp.NewFunctionalityTest"
to
Inherits="NewFunctionalityTest"
in the first line.
To nest resx files you
Add Existing Item. Add resource and designer files to the project.
Select all resource files (Not Designer files) that are not nested.
Select Properties and change the Custom Tool to PublicResXFileCodeGenerator
Should work
Made sure both partial files are the same namespace and class name? Might also try to remove them and add both files back at the same time.
I ran across this macro a while back to do exactly what you're looking for. The author even posted a video of how to use it. I have never tried it though, so I can't vouch for it.
I don't know if the OP ever fixed his issue, but something very similar is happening to me. The designer.vb files aren't nesting, Intellisense isn't working, etc... The main difference is that I'm not using ascx, I'm using straight up .aspx pages with .vb codebehinds. It appears as though all the controls placed on the aspx page do not appear to VS as declared when I go to manipulate said controls in the codebehind. I get an error list hundreds deep from code I wrote months ago (having no problems with at the time), most of them saying "Name 'objectname' is not declared" where 'objectname' is a textbox, or dropdown menu from the associated aspx page. To answer Vishal's questions...
Can you share whether this happens everytime you create a new project or is it for a specific project...?
It's happening to one project. I have multiple other applications in VS2008 showing no problems.
Did you try compiling the project?
Yes, when I compile it lists out all the build errors that show up in the ErrorList aborts, and kicks over to the ErrorList.
Does intellisense come back after compiling
No.
A little more information on this project: It's a converted VS 2003 project. These problems did not start immediately after conversion from 2003. The conversion happened months ago and I made numerous revisions to the web app since then. There's currently a version with those revisions on a test server to show off new functionality to the client. This problem only cropped up 3 business days ago when I went in to make a few formatting changes to the aspx page. I never got a chance to make those changes however because as soon as I opened the project I got the error list. This issue is affecting every aspx page I have in the project.
I do not think the nesting is an issue for you, seeing nested files is just a eye candy although depends upon matters...
Not getting intellisense is not really a factor of nesting but rather something to do with the way references are hooked up for your project... Can you share whether this happens everytime you create a new project or is it for a specific project...?
Did you try compiling the project? Does intellisense come back after compiling... Typically for WAP projects if for somereason intellisense does not become available it should come after you compile the project...
Let me know if are still facing this issues...