I'm trying to use the Gentelella theme with MVC but I can't get it to work right, and I feel like I'm defining the bundles incorrectly. I copied the HTML code exactly as it was in the sample and I get this:
Bad layout
There shouldn't be any margins - I want it to appear how it does on the GitHub page. I define the bundle like so (admin being what I renamed the build files as):
bundles.Add(new ScriptBundle("~/bundles/admin").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/admin.js"));
bundles.Add(new StyleBundle("~/Content/admin").Include(
"~/Content/bootstrap.css",
"~/Content/admin.css",
"~/Content/font-awesome.css"));
Related
In my _Layout page I have these scripts:
#Scripts.Render("~/Scripts/Scripts.js")
#Scripts.Render("~/Scripts/moment-with-locales.js")
#Scripts.Render("~/Scripts/moment.js")
#Scripts.Render("~/Scripts/bootstrap-datetimepicker.js")
#Scripts.Render("~/Scripts/DayPilot/daypilot-all.min.js")
So instead of writing all of those out, I want to create a bundle:
bundles.Add(new ScriptBundle("~/bundles/otherScripts").Include(
"~/Scripts/Scripts.js",
"~/Scripts/moment-with-locales.js",
"~/Scripts/moment.js",
"~/Scripts/bootstrap-datetimepicker.js",
"~/Scripts/DayPilot/daypilot-all.min.js",
"~/Scripts/DayPilot/daypilot-common.src.js"));
So now in my _Layout page I have this:
#Scripts.Render("~/bundles/otherScripts")
Now in my bootstrap-datetimepicker.js I have edited 1 line.. and the change shows visually when I test this app locally.. but when I publish.. that line that I changed does not work..
The only way it works is if I exclude the bootstrap-datetimepicker.jsfile from the bundle and reference it in the _Layout page specifically.
How do I just combine all of those scripts into the bundle and it work properly when published?
I'm new to webdevelopment, and have made my first MVC application.
Everything works and looks fine om my development machine, but when I publish it to the server I get some errors in Internet Explorer.
But Everything looks and works ok in other browsers, for example Google Chrome.
Does anyone have any idea about what I have done wrong so I know what to look for?
If you need to see any code, please let me know what parts as I don't know what I have done wrong.
Error messages
//Edit
Here is the references that I have in the head tag in _Layout.cshtml
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/themes/base/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/bootstrap")
And my BundleConfig.cs looks like this
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js",
"~/Scripts/bootbox.min.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/accordion.css",
"~/Content/themes/base/all.css",
"~/Content/themes/base/autocomplete.css",
"~/Content/themes/base/base.css",
"~/Content/themes/base/button.css",
"~/Content/themes/base/core.css",
"~/Content/themes/base/datepicker.css",
"~/Content/themes/base/dialog.css",
"~/Content/themes/base/draggable.css",
"~/Content/themes/base/menu.css",
"~/Content/themes/base/progressbar.css",
"~/Content/themes/base/resizable.css",
"~/Content/themes/base/selectable.css",
"~/Content/themes/base/selectmenu.css",
"~/Content/themes/base/slider.css",
"~/Content/themes/base/sortable.css",
"~/Content/themes/base/spinner.css",
"~/Content/themes/base/tabs.css",
"~/Content/themes/base/theme.css",
"~/Content/themes/base/tooltip.css"));
}
I finally found out what was causing this issue.
In Internet Explorer settings, "Display intranet sites in Compability View" was selected.
Unchecked it and now everything works.
I have very strange problem in MVC BundleConfig file. Before publishing my site I set BundleTable.EnableOptimizations to true, and was waiting that my css file would be minimized after publishing. But one file from ScriptBundle is minified, and another one from same ScriptBundle isn't. Here is what I mean:
my BundleConfig code:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css"));
BundleTable.EnableOptimizations = true;
and in _Layout I have:
#Styles.Render("~/Content/css")
So result of this code is that, when I check sources of site in browser, there is one css file, where my bootstrap.css and Site.css files are combined, but bootstrap.css is minified, and Site.css isn't. I just can't figure out why system doesn't minifies my Site.css file.
It's the weirdest problem I had ever had, so if you know what's going on, please help me.
you should try the following code
public static void RegisterBundles(BundleCollection bundles)
{
bundles.IgnoreList.Clear();
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/Site.css"));
BundleTable.EnableOptimizations = true;
}
using IgnoreList you can bypass any already minified css that is not including in bundle ,because its already minified and mvc bundle will ignore it.
If this doesnt work you need to validate your css, you can use web essentials to validate your css.
Hope this helps.
I've been having a lot of trouble having the theme I load render properly in my ASP.NET MVC 5 application... I've been doing a lot of research, but I think it might be related to the dialog issues I've been having as well... Can anyone please help me out?
From what I understand, I need to reference what class of button I want to use like this:
<button class="ui-button" id="overview">Overview</button>
But it still renders the button as just a gray button, no theme.
Here are my bundles:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css",
"~/Content/themes/base/jquery.ui.all.css"));
bundles.Add(new StyleBundle("~/Content/ui-darkness/css").Include(
"~/Content/ui-darkness/jquery-ui-1.10.4.custom.css"));
And here is my Layout:
#Styles.Render("~/Content/css")
#Styles.Render("~/Content/themes/base/css")
#Styles.Render("~/Content/ui-darkness/css")
#Scripts.Render("~/bundles/modernizr")
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
Also of note is that Intellisense does not have any tooltips for .button() or .dialog().
Any help would be greatly appreciated!
Edit: I've attached a picture of the non-stylized button "overview"
http://i.stack.imgur.com/kohZH.png
I think when you downlod the JS and CSS file related to jqueryui with out check dialog and button option
go to http://jqueryui.com/download/ and check all the check box and download the js and csss file and use in your project.
You should not had Theme/base CSS.
I do'nt use the same Theme, but It work's here with :
BUNDLE
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/Css/jquery-ui-1.10.3.custom.css",
"~/Content/Css/bootstrap.css",
"~/Content/Css/font-awesome.min.css",
"~/Content/Css/site.css"));
LAYOUT
#Styles.Render("~/Content/css")
VIEW
<button class="ui-button" id="overview">Overview</button>
jquery-ui-1.10.3.custom.css came from \jquery-ui-1.10.4.custom\css\smoothness\
It's enough to add the CSS you find in your theme folder.
I have this bundling configuration:
bundles.Add(new StyleBundle("~/styles/style1").Include("~/Content/library/styles/style1.css")
Then I added this code to render the bundled CSS:
#Styles.Render("~/styles/style1")
My CSS has this content:
.style1 {
background-image: url("../img/image.png");
}
Due to bundling, the path of background image is misdirected to ~/Content/library/img/image.png instead of ~/img/image.png. I don't want to edit the CSS file path because many other pages are using it. Do you know of any solution to it or am I missing a configuration in bundling?
You're gonna need to apply the CssRewriteUrlTransform to fix this:
bundles.Add(new StyleBundle("~/styles/style1")
.Include("~/Content/styles/style1", new CssRewriteUrlTransform())
Alternatively, you can also use absolute paths in your stylesheets.
P.S: As stated in the comments, you have to add the Web Optimization Package to your project through Codeplex or NuGet to be able to use the CssRewriteUrlTransform class