I'm having problems bundling kendo.common.css in my web app.
After bundling and running in IE9, the styles are not applied and it appears to be breaking when it reaches #media screen and (-ms-high-contrast: active) and (-ms-high-contrast: none). This works fine prior to bundling.
How can I debug the bundling process to see if it is breaking when bundling this file.
Related
I have an HTML/JS/CSS app that's been added to the home screen on an iPad. This is not a cached HTML app - it doesn't have cache.manifest and is supposed to pull data from the server.
For some crazy reasons, it's cached the CSS file and refuses to get the new version from the server. Mobile safari does show the latest version correctly. I deleted the home screen icon, killed the app in the recent list, cleared safari cache, cookies and website data, killed safari in the recent apps and and re-added the home screen icon again after ensuring that I am seeing the latest data on safari. When I run it, it's still using the old cached version of the CSS.
It's worth noting that it took about 20 restarts for it to see the updated images and javascript files, but it's still not seeing the new css.
Any pointers are more than welcome.
P.S. I managed to solve this on my own ipad by connecting it to the computer, going into the dev console and refreshing from there, however I can't force the client to do the same (least because the client doesn't have a mac) - I need a way to force it to refresh the files from ipad alone, without involving any other hardware.
I have run into this a few times.
The simplest solution is to add a version number after your css link:
<link rel="stylesheet" href="style.css?ver=1" type="text/css" />
Just change the version number when making edits - that should force the device to reload the CSS.
If you are using php, you can add the file modification timestamp to the css link:
<link rel="stylesheet" href="style.css?ver=<?= filemtime('style.css') ?>" type="text/css" />
This would force it to reload the file each time you change it.
See a more complete explanation here:
http://php.net/manual/en/function.filemtime.php#81194
And here:
https://markjaquith.wordpress.com/2009/05/04/force-css-changes-to-go-live-immediately/
I am using the functionality in ASP.Net where it detects if the browser is on a mobile device and redirects to the page that has *.mobile.cshtml. This is all working great as long as I'm actually using a mobile device, but I can't seem to figure out how to get Chrome or Firefox to use the *.Mobile.cshtml files instead of the standard .cshtml files.
I've tried setting the Chrome emulation to use iPhone, but it is still rendering my standard pages.
Is there some setting in VS or Chrome that will tell ASP.Net to render the mobile version?
I'm in the early stages of investigating how to support a mobile set of pages in an ASP.NET Web Forms Site project.
In previous projects using MVC and Razor we would simply have a .mobile.cshtml version of the page and the ViewEngine would handle the switching between desktop and mobile versions of the page on the server (so for example index.cshtml would be served for a desktop browser and index.mobile.cshtml for mobile).
I had thought that something similar would be in place for web forms projects and to make sure fired up Visual Studio 2012, created an ASP.NET Web Forms site project and voila the template had created both a Site.Master and a Site.Mobile.Master and even included a ViewSwitcher.ascx. However when browsing to the site using either Chrome with the user agent set to one of the mobile strings or using the Electric Plum IPhone simulator I'm always ending up with the desktop version of the page.
I've done some debugging and had a look at the DisplayModeProvider.Instance.Modes collection and there is a Mobile provider and a default provider listed, so I'm a little confused as to what else is required to get the mobile version being rendered.
Hey Neil did you look at the CSS file in the project? The #media tag allows your to write css to style on a device that is smaller.
/**********
* Mobile Styles *
**********/
#media only screen and (max-width: 850px) {
//styles here
}
We had the same Problem. We needed some time to figure out, that you need to open the page with the URLRewrite-URL. Try to open
http://mymachine/myApplication/default
instead of
http://mymachine/myApplication/default.aspx
Best regards,
Nico
I have a django site running locally. Everything seems ok except the CSS files that can not be loaded by Chrome. I can see a Failed to load resource error in the console.
The site is ok in firefox
The site is ok if I get the css not from the local server but from the production server
The css source can be viewed correctly
I have no special blocker plugin install
The css is rather big but I still have the issue if I use a very short file
I have similar issues with some js files (ckeditor)
It works of with some other css and js (admin css for example)
The django app has been developped with 1.0 and I am in the process of moving it to 1.4. The css and js files are served as media
Any idea?
Didn't find the real cause but the problem is solved. Maybe because it was served as media and now it is served as a static.
So, I have an application that I test on my VS2010 virtual ASP.NET server, when I open it in IE on my local environment, everything renders fine, but whenever I deploy it to the external server, it starts to screw stuff up in IE (CSS and some jQuery problems). I have the same code everywhere, how is it possible to be rendering it differently? (I test them in the same IE version), everything works fine in other browsers.
It sounds like a compatibility-mode issue. In some cases, IE will jump into compatibility mode unexpectedly. This is often related to browser configuration.
Easiest way to preven this is to add the following meta tag to your HTML code:
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
This will force IE to always use the best available rendering engine, and prevent it jumping into compatibility mode, regardless of the browser config.
Hope that helps.