I have an ASP.NET MVC application that works fine when I run it on Visual Studio. But when I publish it, all the styles dont seem to work. Are there any general guidelines on why styles dont work for an MVC application when published because right now I have no clue on what is happenning??
Any ideas and suggestions are appreciated!
There are many reasons why your css styles might not show up.
Caching: Maybe your browser use a cached version of your css file(s). Check with fiddler or clear the browsers cache
Wrong relativ path to the css file(s): You should specify relative paths when including css files in your views (use Url.Content("~/...") for getting the right url). This is an issue when you use not the same path on your IIS and your IDE.
But the first check in any cas is to run fiddler and see
Is the browser requesting the right css file(s)
Is the server returning the file or a 404, 304, ... status code
It is possible that you have defined the styles in a new file and have not included the new css file in your project (in Visual Studio .net).
VS.Net does not publish those files which are not part of the project.
Get Firebug, inspect the element that should have the style applied and see what CSS is actually present.
Take a look at the CSS Panel and see the CSS files that are being linked (click the down arrow in the master.css as shown in the image below).
Related
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'm having a problem using Vaadin (in Eclipse) and its associated styling engine Valo, and the TouchKit package. I mention all of these because I'm not sure which, if any, is causing the problem. The name of my custom theme (which imports Valo) is simply "touchkit".
I have the project running on a Tomcat server on localhost and accessible in my browser. I wanted to tweak some of the CSS so I edited the appropriate file WebContent/VAADIN/themes/touchkit/touchkit.scss. After editing this file, I recompile the theme and see the appropriate changes in the generated file styles.css. Then I go to load up the application in my browser, and things get weird.
I can load the page and, using Chrome's developer tools, see that the page requests styles.css for download, as expected. It gets a 200 OK response from the server, but when I view styles.css, it contains just a single \n. This is also true in Safari. Even using cURL to download styles.css yields the same result. In the Eclipse editor, and when I inspect it in the terminal, styles.css is ~12,000 lines long. Why can't my browser or cURL get that data?
I can view similar project demos on Vaadin's own site and the stylesheet (which should be almost identical to mine) is loaded correctly. Also, other Vaadin projects on my localhost server have their stylesheets loaded correctly (though they do not use Valo). Compiling the theme in Eclipse yields no errors. Because the issue presents itself across a variety of graphical and non-graphical clients, I'm starting to think the issue is with Tomcat. But I can get to the directory from which Tomcat serves files and styles.css is correct in that folder too. There's no apparent reason that Tomcat would be serving a blank file.
You may have guessed from the description, but I'm working on a Mac. Any help is appreciated!
PS Mods - I also asked this question over at Superuser since it wasn't 100% a programming question. However, I'm new at Superuser and couldn't create tags for Vaadin or Valo, so I'm asking here where there might be a better chance of getting an answer.
Hard to say, since your are doing everything fine. My best bet would be the tomcat implementation you are using, maybe there's something weird there. Try upgrading to latest if it's not or to a previous version.
FYI I'm using Tomcat 7.0.55.
PS: your attempts are in run/debug from eclipse or have you made a .war form the project and deployed it with the Tomcat-Manager?
Regards
add below to your gwt.xml, and touchkit is not valo aware see https://vaadin.com/forum/#!/thread/8264224/8264223
<set-configuration-property
name='touchkit.manifestlinker.additionalCacheRoot'
value='src/main/webapp/VAADIN/themes/MyTheme:../../../VAADIN/themes/MyTheme' />
My question is in the title...
I have a JSP page with a form. On Tomcat bundled with Netbeans IDE the CSS renders the form exactly as intended, however, when I deploy the WAR file to Tomcat on my production web server the CSS on the form Select element is missing and a standard dropdown box is displayed. All of the other form elements are rendered as intended.
I'm using the same web browser to view the form in both scenarios.
Anyone know what might be going on here?
Thanks
Its not rendered differently, since CSS its rendered in your browser. Open a Network monitor (Firefox: Ctrl+Shift+Q, IE: F12, ...) and see if your files are loaded correctly.
First things first, yes I am fully aware this has been addressed here before, however none of the solutions seem to resolve my issue. My problem is simply that I have created a new web project and everything works fine with the default code template that VS2013 has provided, the problem I am currently runing into is adding my own CSS files. This is the process I went through to add them:
added CSS folder under the already existing Content directory
Linked to CSS files in the header CSHTML (I can be sure it is linked properly as it is not a 404 error
but when i run the project i get: Status Code:401 Unauthorized (pulled form the network explorer in chrome dev tools), nothing more. I have tried everything from modifying my config file to setting WindowsAuthentication to true and even moving NTLM to the top, to going into IIS and giving everyone access to every possible function to the CSS directory, been at this for an hour and I'm simply lost, any ideas?
Edit: if it helps at all this is the erro i get when i navigate to one of the CSS files:
I found the issue and I feel incredibly stupid about it, as it turns out all of my css files had encryption set on, i simply had to turn it off: right-click
*.css file > Properties (General tab) > Advanced button > Encrypt contents to secure data checkbox.
Works like a dream. If anyone ever purchases a template form ThemeForest, be wary of that.
I have an issue where the CSS is not rendering properly when I compile the MVC project and view it on [https://localhost/MyApp.] The buttons, and background image are not showing up. It worked one time, then for some reason it stop working. Something with the pages not caching? I used firebug to check to see if the pages were missing, and no errors were found. Something in Visual Studio 2010 settings need changing or IIS?
However, when I publish it to an individual website, instead of in the (default web site) area, using [https://localhost:444] website I setup in IIS 7.5, the css seem to render fine.
What is the problem?
One common problem that occurs on MVC 4 websites is difference between release and debug when you have css bundles. It does not have to be your case, but you have the symptoms.
I will explain on an example.
If you have bundle which looks like this:
var styles = new StyleBundle("~/Content/css").Include(
"~/Content/toastr.css",
"~/Content/flags/stylesheets/flags16.css",
"~/Content/flags/stylesheets/flags32.css",
"~/Content/Site.css")
And in flags16.css you have:
background:url('flags/images/flags16.png');
Which uses file in ~Content/flags/images/flags16.png
That will work in release mode (compilation debug="false" in web.config), because all of your css files in bundle will be served as 1 file located at ~/Content/css with relative path 'flags/images/flags16.png' pointing at correct file.
However, in debug mode, ASP.NET MVC will disable minification, and if you used #Styles.Render("~/Content/css") inside your view, it will render link to every one of your files contained in a bundle, so there will be a:
<link href="/WorkOrders.Web/Content/flags/stylesheets/flags16.css" rel="stylesheet">
And from that path, relative path to image is not ok, so images in flags16.png will not be rendered.
One way to solve this, you need to move your .css file which contains references to images to the location where bundle is pointing (~/Content in this case), so it will have same path when it is served minified and raw.
UPDATE As your app is not mvc4, and you have problems when your app is not in the root of your web site (i.e. when it is in localhost/myapp) then you need to check paths in references to your pictures. It is possible that you referenced them absolutely ('/somepath/mypic.png'), and when your app is in localhost/MyApp, path needs to be localhost/MyApp/somepath/mypic.png. You can solve that by replacing path with #Url.Content(~/somepath/mypic.png), if you are using it from cshtml. If path is in css, then you need to put relative path to your pictures.
I have just been battling with the same problem - images, scripts and css not being found or rendered. (Visual Studio 2013, Windows 8.1. Project moved across from Visual Studio 2010.)
The problem was caused by a line in Web.config:
<mimeMap fileExtension=".mp4" mimeType="video/mp4" />
It seems that because the IIS Express application.host file already contained this mimeMap definition, IIS Express couldn't cope with it being defined again.
Removing this line from Web.config completely solved the problem.
It looks like your web site is configured to use SSL. Except that when running locally you probably do not have a valid SSL certificate which is trusted by a certification authority and the client browser is refusing to download the static resources. One way to fix that is to add the address as trusted. So copy paste the url to some of your CSS files in your browser address bar:
https://localhost/MyApp/Content/Main.css
and you will see a warning about the invalid certificate that you could ignore by adding an exception to your browser. Hit Ctrl+F5 to force a refresh once the exception is added and your application should start working properly.
When I had this problem I found that all of my CSS and Script files were encountering a HTTP 500 error when they were being downloaded in the browser (Firefox 33.0.2).
Killing the instance of my browser in the Task Manager and then starting afresh fixed the issue for me.