We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to resolve CSS reference issue while including the theme file in bundle?

               

Problem

When the CSS files in BundleConfig has reference to some other files, a file not found” issue arises and it is a common issue while using bundling in MVC.

Reason

What bundling actually does in MVC?

Bundling is the process of bundling a list of files from the specified location and creating a single bundled file in the targeted location. This targeted location is formed as a virtual path and it is referred in the Application.

Therefore, when you create Style bundle with list of CSS files, the CSS files are bundled into single and referred in Application. In CSS files, mostly you refer to the images that are used in webpage design and these images are placed in Application location and referred through CSS. Accordingly, when you create a bundle and its virtual location is in some other path, then you face the “file not found” issue (like images not loaded). Since the images from physical path and the given virtual path in bundle are in different location.

In the Microsoft forum, the same type of issue is analyzed when you use bundle with CSS and image. Refer to the following link for more details about the issue, "http://forums.asp.net/t/1774324.aspx".

Solution

The solutions for the above problem is to create a bundle with virtual location as same as the Application location.

Using Syncfusion EJ Component

The same type of issue occurs when you use Syncfusion EJ component, as different folder structure is maintained for each themes and its corresponding images.

Problem

Syncfusion EJ component contains different kind of themes. Each theme contains corresponding theme CSS file and images.

The default folder structure for Syncfusion themes is illustrated in the following screenshot.

Figure 1: Default Folder Structure

Therefore, when you create a bundle and its virtual location is in some other location other than the particular theme location, then you face the same issue (images not loaded).

Solution

To solve this problem, create different type of bundles for different type of themes used in Syncfusion EJ component.

For example when you are using default-theme, then create the bundles target location (default-theme) as follows,

bundles.Add(new StyleBundle("~/Content/ej/default-theme/css).Include(

"~/Content/ej/default-theme/ej.widgets.all.min.css"));

When you are using another theme (“xxx”) then create the bundle’s target location (“xxx”) as follows,

bundles.Add(new StyleBundle("~/Content/ej/xxx/css).Include(

"~/Content/ej/xxx/ej.widgets.all.min.css"));

Note: “xxx” is used to provide one of the Syncfusion JavaScript theme name.

 

Article ID: Published Date: Last Revised Date: Platform: Control:
3036 12/11/2014 12/15/2014 ASP.NET MVC General
Tags:
Did you find this information helpful?
Add Comment
You must log in to leave a comment

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon