ASP.NET MVC 4: Different appearance locally vs deployed to Azure - asp.net-mvc-4

Question

I am using a jQuery datepicker for editing DateTime values in an ASP.NET MVC 4 application.
It works as expected when running locally.
When deployed to Azure, it looks like the .css is missing.
In the image below, the local behavior is on the left, the Azure behavior on the right.
Any ideas on what is going wrong, and how to fix it, would be appreciated....
I have an EditorTemplate for DateTime datatypes:
#model DateTime
#Html.TextBox("", Model.ToString("MM/dd/yyyy"), new { #class = "date" })
The javascript to hook up the datepicker:
/// <reference path="jquery-1.10.2.js" />
/// <reference path="jquery-ui.js" />
$(document).ready(function () {
function getDateYymmdd(value) {
if (value == null)
return null;
return $.datepicker.parseDate("yy/mm/dd", value);
}
$('.date').each(function () {
var minDate = getDateYymmdd($(this).data("val-rangedate-min"));
var maxDate = getDateYymmdd($(this).data("val-rangedate-max"));
$(this).datepicker({
dateFormat: "mm/dd/yy",
minDate: minDate,
maxDate: maxDate
});
});
});
And in the Edit.cshtml:
#section Scripts {
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jqueryui")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/Scripts/EditorHookup.js")
}
UPDATE:
I:\work\App
--- Content
------ themes
--------- base
------------ images
------------ minified
The jquery*.css files are in App\Content\themes\base.
When I copy them to App\Content, the datepicker works.
The bundling code:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.all.css",
"~/Content/bootstrap.css",
"~/Content/site.css"));

Answer 1

You are missing a CSS for jqueryUI, please make sure the path to CSS is correct and if its part of Bundle which it looks like it is, make sure that u're referencing correct version in the bundle

Answer 2

I don't know how did you define the bundles, but if you have two definitions, say:
bundles.Add(new StyleBundle("~/Styles/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.all.css",
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.theme.css",
"~/Content/themes/base/jquery.ui.datepicker.css"));
Then in the layout you have to render both of them, and try moving the code to the top in _Layout
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Styles/css", "~/Content/themes/base/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
This code runs fine and you'll see the datepicker properly, take a look in the bundle code if you're missing any reference. I'm using the same folder structure
Regards