I'm having the hardest time trying to figure out this bug. All my widgets in JQuery Mobile render incorrectly on my development server, but when I push changes to heroku everything is fine. I tried deleting my tmp folder in rails but it still renders strangely.
Here are screen shots of my development server and the heroku one:
I think it has something to do with the asset pipeline, but I have no idea what might be causing it.
Make sure you delete your public/assets folder. Compiled css and js will overshadow your changes
Related
I'm currently learning Blazor Webassembly. I had issues with my styling and I could not figure it out, why my CSS is wrong all the time. Then randomly after some time passed I saw, that my changes on Client/wwwroot/css/app.css are not picked up. In the browser it is still the same as when I created the project.
What do I need to do?
This Problem can be solved by refreshing the browser with CTRL+F5
I have a nice html, css template (source code here).
I am going to use this template in my angular2 app (source code here).
I got the html template out of this repository (index.html).
My problem is in the angular2 source code
You need to clone the angular source.
Run npm install
Run ng serve
Unfortunatly, it seems that the <script src="assets/js/main.js"></script> in index.html is not added properly. Although, there is no error in the console, the left menu is broken. I know that this problem occurs when main.js is not fit.
Here is the correct html page:
Here is the angular page (broken header and menu):
The codes are identical, but I have decomposed the html template into 3 components (header, menu, and app (main content)).
Instead of trying to figure out what happened with your CSS, I took the original template, converted it to Angular 2 with the angular-cli, and fixed the CSS issues. It all works now, and the complete source is at https://github.com/Boyan-Kostadinov/angular2-miminium
When you broke apart index.html it's likely that you also altered some file paths.
The relative path would go from src="assets/js/main.js" to something like src="../assets/js/main.js".
Prepending ../ to the path will back out of the current directory to the next level up. As you have it now, the browser is looking for the assets directory in what I assume you have compartmentalized as an htmlComponents directory.
Consider using the absolute path to main.js, at least to diagnose the issue.
I ran into a similar issue with the same file. In my case, I have a complicated application that is developed in stages. I installed my Angular seed in a subdirectory. Because of my file structure, when I run npm start, the live server that is started has bad relative link locations. For example, in the screen shot below, you will see that the application is trying to find style.css at http://localhost:3000/medface/RecordWriter/styles.css; however, it should be looking at http://localhost:3000/styles.css, because the root of the web server that was created by npm start is at /medface/RecordWriter/.
With respect to your project. The key to finding the problem with your link is to open the developer panel and inspect the actual network request. If you share a screen shot, we may be able to help you inspect your instance with more insight.
What Worked for Me
In my case, I reconfigured my local web server to handle any unserved pages in the Angular2 folder and return the index instead. When I run npm start, I close the browser page that opens and use my regular web server. Instead of viewing my application on localhost:3000, I view my application at localhost/medface/RecordWriter/ (which is equivalent to localhost:80/medface/RecordWriter).
The down side to my makeshift approach is that the page must be refreshed before changes appear, but it loads all resources predictably and reliably, and allows my Angular2 code to run in conjunction with some of the older code base in other areas of the website that have not been converted to Angular2. Regardless, this may work for you also.
I have a problem with a project in Laravel, the problem is that when you edit CSS code or add images and reload the page, changes do not apply.
eg I had an image called 1.jpg which was then deleted, replaced with 2.jpg. I edited the code calling the image 2.jpg, but even after reloading the page, 2.jpg is not displayed.
It is not browser cache - I've tried clearing it, but the issue remains. This also happens to me when I edit CSS - the changes are not applied. Any ideas? I've used Sublime text 2 and 3 with windows 8.1.
I've tried php artisan cache: clear, deleting the cache of the project, and no luck. I'm going crazy, can anyone suggest what to do?
If you are adding the css in the resources/sass/app.scss then you need to run after it npm run dev , this will compile your css.
I suggest adding the css internally in the file in the head tags or even inline css. But everytime you make changes to your resources/sass/app.scss you need to run npm run dev
I think I have installed everything needed and installed it correctly, but I am obviously missing something; or had a misstep somwhere along the line. I am on a Linux and I know for a fact the site works when viewed elsewhere. Here is a screenshot of what I see when I view the site locally: http://imgur.com/yPWcanu What are the common causes for this?
There might be some problems with paths. Open the Chrome development toolbar and check if there's a problem with loading the css files.
You should see them under the "Network" tab after reloading the page.
I am trying to update the font in a rails app - specifically the text in a brand class in the top navbar. I was successful in changing the font using google web fonts already, but now when I try to update the font again, it seems to be "stuck" on the last font I used. I precompiled assets before deploying to heroku, which is what I think may be causing the problem. Now the changes are not updating locally or in production.
I have done a few things to troubleshoot but none seem to be working:
Restarted the rails server
Emptied the cache folder in the tmp folder
Deleted public assets
Tried precompiling assets again - the font change does not work locally or on heroku
Tried targeting a more specific css selector (.navbar .brand versus .brand - it worked earlier for .brand so don't think that is the issue)
Cleared browsing history
Any ideas on what may be causing this?
Are you using turbolinks? If so, read this
Asset change detection
You can track certain assets, like application.js and application.css,
that you want to ensure are always of the latest version inside a
Turbolinks session. This is done by marking those asset links with
data-turbolinks-track, like so:
<link href="/assets/application-9bd64a86adb3cd9ab3b16e9dca67a33a.css"
rel="stylesheet" type="text/css" data-turbolinks-track>
If those assets change URLs (embed an md5 stamp to ensure this), the
page will do a full reload instead of going through Turbolinks. This
ensures that all Turbolinks sessions will always be running off your
latest JavaScript and CSS.
When this happens, you'll technically be requesting the same page
twice. Once through Turbolinks to detect that the assets changed, and
then again when we do a full redirect to that page.
Stupid mistake - had a navbar class styled in my css with font-style: monospace. After clearing that, everything worked - hopefully the troubleshooting steps help others!
View your page source and search for the font src. If you can't find it skip to 3.
Test the font and display code outside of the rails apps to make sure it is the asset pipeline.
If the src and display code work, provide your application.css and application.js to check your manifests.
What config files/code have you changed since your last assets:precompile that is not working properly.
My similar issue: Bootstrap, jQuery, and the Rails asset pipeline