Ra3IDeN Ra3IDeN - 1 month ago 8
CSS Question

webserver displaying wrong layout

Ive recently deployed my asp.net mvc application.

functions work like they are suppose to but I have a design problem.

I am using bootstrap

I have a few pages on the site and some pages needed to be a little bit bigger so I have up to 20 colmns on two pages and a maximum of 12 columns on another page.

I used two seperate layouts to make this work where one loads the bootstrap file with 12 columns and the ther layuout lods the file with 20 columns.

bundle:

12 columns (bootstrap.min)

bundles.Add(new StyleBundle("~/energy/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/bootstrap-datetimepicker.css",
"~/Content/bootstrap-select.css",
"~/Content/octicons.css",
"~/Content/css/select2.css",
"~/Content/Automation.css"));


20 columns (bootstrap)

bundles.Add(new StyleBundle("~/energyTwo/css").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-datetimepicker.css",
"~/Content/bootstrap-select.css",
"~/Content/octicons.css",
"~/Content/css/select2.css",
"~/Content/Automation.css"));


layout1:

@Styles.Render("~/energy/css")


layout2:

@Styles.Render("~/energyTwo/css")


This workes localy but on the webserver for some reason the file with bootstrap -12 columns always get loaded and not the one with 20 columns. What am I doing wrong?

Answer

Try renaming your bootstrap files differently:

  bundles.Add(new StyleBundle("~/energy/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/bootstrap-datetimepicker.css",
                  "~/Content/bootstrap-select.css",
                 "~/Content/octicons.css",
                  "~/Content/css/select2.css",
                  "~/Content/Automation.css"));


bundles.Add(new StyleBundle("~/energyTwo/css").Include(
                  "~/Content/bootstrap.modified.css",
                  "~/Content/bootstrap-datetimepicker.css",
                  "~/Content/bootstrap-select.css",
                 "~/Content/octicons.css",
                  "~/Content/css/select2.css",
                  "~/Content/Automation.css"));

And always point the full versions of css files to bundles as it heavily relies on naming conventions.

Bundling and Minification will use the files you point for debugging purposes and generate minified versions for release. For example, energy bundle will generate bootstrap.min.css for Release configuration and use bootstrap.css for Debug configuration.

Comments