This is a migrated thread and some comments may be shown as answers.

asp.mvc css minification breaks kendo bootstrap

3 Answers 1134 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
Morten asked on 27 Feb 2014, 08:21 AM
In a asp.net mvc 4.5 web app using kendo bootstrap I get an 404 error when my css bundle is minified.

Setup
Bootstrap v3.1.1
Kendo UI Complete v2013.3.1424

Web.config: <system.web><compilation debug="false" targetFramework="4.5" />

BundleConfig.cs

public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
bundles.Add(new StyleBundle("~/Content/allcss").Include(
"~/Content/bootstrap.min.css",
"~/Content/kendo/kendo.common-bootstrap.min.css",
"~/Content/kendo/kendo.bootstrap.min.css",
"~/Content/kendo/kendo.dataviz.min.css",
"~/Content/kendo/kendo.dataviz.bootstrap.min.css",
"~/Content/site.css"));

Error:
"NetworkError: 404 Not Found - http://localhost:58709/Content/Bootstrap/sprite.png"

Solution: If I copy/move the Bootstrap folder from Content/kendo to Content it works (in compilation debug="false"), however produces error in compilation debug="false".

For now I can live with having the kendo/Bootstrap folder in two places.

3 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 27 Feb 2014, 12:32 PM
Hi Morten,

Generally, there are two scenarios:

1. If you are not using CSS bundles, then the theme images should reside in a subfolder, which is in the same folder where the Kendo UI CSS files are placed. For example:

Kendo UI CSS files are in:
... / folder1 / folder2 / kendo.silver.min.css

Kendo UI theme images should be in:
... / folder1 / folder2 / Silver / sprite.png

The image paths in the Kendo UI CSS files are relative and in the following format:

ThemeName / imagename.png

In other words, the structure shown above will ensure the images are found.


2. If you are using bundles, then the logic is similar, but since the URLs in the CSS code are still relative, you need to take into account the virtual URL from which the bundled CSS code will be loaded from. For example:

Virtual CSS bundle url is:
... / folder1 / folder2 / bundleName

Kendo UI theme images should be in:
... / folder1 / folder2 / Silver / sprite.png

As you see, the easier way to achieve the desired correct loading of theme images is to make the virtual bundle URL match the Kendo UI CSS files' physical location. In this way the theme images will work both when bundles are enabled, and disabled.

Regards,
Kamen Bundev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Accepted
Sean
Top achievements
Rank 1
answered on 03 Mar 2014, 07:22 PM
You can also use the StyleBundle.Include overload that accepts a CssRewriteUrlTransform.

Here's what one of my Kendo bundles looks like:

bundles.Add(new StyleBundle("~/bundles/css/dashboard/black") { CdnPath = cdnPath + "bundles/css/dashboard/black" }
.Include("~/content/css/menusprites.css", new CssRewriteUrlTransform())
.Include("~/Content/kendo/kendo.common.min.css", new CssRewriteUrlTransform())
.Include("~/Content/kendo/kendo.dataviz.black.min.css", new CssRewriteUrlTransform())
.Include("~/Content/kendo/kendo.black.min.css", new CssRewriteUrlTransform()));






0
Moniques
Top achievements
Rank 1
answered on 06 Feb 2015, 10:13 PM
Hi, I got exactly same problem after I upgrade telerik ui for mvc to 2014.3.1316 version. 


Edit Icons were gone and I did checked bundle issue and could not find problem with it. 

and Kendo.silver.min.css was located at 


Is it bundle problem?
Thanks,
Monique



Tags
General Discussions
Asked by
Morten
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Kamen Bundev
Telerik team
Sean
Top achievements
Rank 1
Moniques
Top achievements
Rank 1
Share this question
or