Response title
This is preview!
Move this topic
Accordion (1.10.3) does display icons when using view in MVC 4 Razor engine
in Using jQuery UI
•
9 years ago
Accordion does not display icons, irrespective of browser.
I have tried using: icons: true
icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } and other forms of this parameter.
icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } and other forms of this parameter.
Using Firebug to inspect the active-inactive styles I can see the icon master png so I am fairly certain the image file is loading.
I have linked the style and the chosen theme appears to look correct, at least the colours are correct.
I have linked the style and the chosen theme appears to look correct, at least the colours are correct.
I have a reference to the two script files jquery-2.0.3.js and jquery-ui-1.10.3.js so the accordion behaves as expected that is: collapse-retracts when clicked.
A partial copy of the view mark-up is:
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary()
<div id="accordion">
<h3>This section is required</h3>
<div>
@Html.LabelFor(expression: m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
@Html.LabelFor(m => m.Email)
@Html.TextBoxFor(m => m.Email)
@Html.ValidationMessageFor(m => m.Email)
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password)
@Html.ValidationMessageFor(m => m.Password)
@Html.LabelFor(m => m.ConfirmPassword)
@Html.PasswordFor(m => m.ConfirmPassword)
@Html.ValidationMessageFor(m => m.ConfirmPassword)
</div>
<h3>Add contact information now?</h3>
<div>
@Html.Partial(partialViewName: "_Contact")
</div>
<h3>Company Information</h3>
<div>
@Html.Partial(partialViewName: "_Company")
</div>
</div>
<p style="clear: both">
<input type="submit" value="Register" />
</p>
}
I have also tried removing the form element and associated AntiForgeryToken and ValidationSummary with no change in the accordion appearance. I also have tried adding <p></p> elements to wrap the HtmlHelpers with no effect.
Any ideas would be helpful. This could relate to a problem I am having with height issues in the next post.
1
Replies(11)
The full JavaScript code which creates the accordion would be helpful in reproducing the problem.
Leave a comment on Adam Boduch's reply
This is the script I am using to create the accordion
<script>
$(function () {
$("#accordion").accordion({ heightStyle: "content" });
});
</script>
<script>
$(function () {
$("#accordion").accordion({ heightStyle: "content" });
});
</script>
Leave a comment on allen's reply
Where are you setting the icons?
Leave a comment on Adam Boduch's reply
Hi Adam,
As far as I am aware, from reading the UI API documentation the icons should default to ui-icon-triangle-1-e for collapsed and ui-icon-triangle-1-n for an expanded section. Is my understanding incorrect?
Leave a comment on allen's reply
Your understanding is correct. So the default icons aren't displaying either? I'm guessing you're using a modified theme. If so, try swapping it out for one of the default themes available from the theme roller. If the icons suddenly start working as expected, you should have a much better idea what's happening.
Leave a comment on Adam Boduch's reply
Hi Adam,
I downloaded "smoothness" theme from ThemeRoller... Same problem no icons. I did notice however that ThemeRoller packed jquery 1.9.x rather than 1.10.3. Could this be the problem?
TIA
Allen
Probably. The Accordion is very simple, and correct. Though I haven't used your MVC, the HTML looks straightforward. The problem is elsewhere. I'd reload ThemeRoller with the proper matching version.
Leave a comment on allen's reply
I'll need to see more code to figure this one out.
Leave a comment on Adam Boduch's reply
_layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="~/Content/themes/soteware/soteware.min.css" />
@*<link rel="stylesheet" href="~/Content/themes/smoothness/jquery-ui-1.10.3.custom.min.css" />*@
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@RenderSection("seo", required: false)
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<div style="float: left; margin-left: 4px">
<img alt="blue binary" src="~/Images/binary on blue world.jpg" style="width: 100px" />
</div>
<div style="float: left; margin-left: 4px; padding-top: 25px;">
<p class="site-title">@Html.ActionLink("Home", "Index", "Home", new { area = "" })</p>
</div>
<div style="clear: left; float: left; margin-left: 4px">
<span class="site-tag">Spice up your life.</span>
</div>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
@if (User.IsInRole("SuperUser"))
{
<li>@Html.ActionLink("Manage", "Index", "Admin", new { area = "Admin" }, null)</li>
}
@if (User.Identity.IsAuthenticated)
{
<li>@Html.ActionLink("Blog", "Index", "Blog", new { area = "Blog" }, null)</li>
}
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - Allen Mayes Consulting</p>
</div>
</div>
</footer>
@RenderSection("scripts", required: false)
@section scripts {
@Scripts.Render("~/bundles/jquery")
}
</body>
</html>
Register.cshtml
@model soteware.Models.RegisterViewModel
@{
ViewBag.Title = "Register:";
}
<style>
/* TBD */
</style>
@section Scripts {
@* Bundles jQuery validate 1.10.3 and jQuery unobtrusive an unobtrusive Ajax *@
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
<script>
$(function () {
$("#accordion").accordion({ heightStyle: "content" });
});
</script>
}
<hgroup class="title">
<h1>@ViewBag.Title</h1>
<h2>Create a new account.</h2>
</hgroup>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary()
<div id="accordion">
<h3>This section is required</h3>
<div>
@Html.LabelFor(expression: m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
@Html.LabelFor(m => m.Email)
@Html.TextBoxFor(m => m.Email)
@Html.ValidationMessageFor(m => m.Email)
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password)
@Html.ValidationMessageFor(m => m.Password)
@Html.LabelFor(m => m.ConfirmPassword)
@Html.PasswordFor(m => m.ConfirmPassword)
@Html.ValidationMessageFor(m => m.ConfirmPassword)
</div>
<h3>Add contact information now?</h3>
<div>
@Html.Partial(partialViewName: "_Contact")
</div>
<h3>Company Information</h3>
<div>
@Html.Partial(partialViewName: "_Company")
</div>
</div>
<p style="clear: both">
<input type="submit" value="Register" />
</p>
}
_Contact.cshtml
@model library.models.ContactViewModel
@Html.LabelFor(model => model.FirstName)
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
@Html.LabelFor(model => model.LastName)
@Html.EditorFor(model => model.LastName)
@Html.ValidationMessageFor(model => model.LastName)
@Html.Partial(partialViewName: "_Address", model: new library.models.AddressViewModel { AddressType = 0 })
@* Ask for shipping address(es) *@
@Html.Label(expression: "labelContactShippingAddress", labelText: "Ship To Address:")
@Html.CheckBox(name: "contactShippingAddress", htmlAttributes: new { id = "contactShippingAddress" })
@Html.HiddenFor(model => model.Registered)
@Html.ValidationMessageFor(model => model.Registered)
_Country.cshtml
@model library.models.CountryBase
@Html.LabelFor(model => model.Country)
@Html.EditorFor(model => model.Country)
@Html.ValidationMessageFor(model => model.Country)
@Html.HiddenFor(model => model.CountryISO2)
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script>
$(function () {
$("#Country").autocomplete({
source: '@Url.Action("Search", "Country")',
minLength: 1,
select: function (event, ui) {
if (ui.item) {
event.preventDefault();
$("#Country").val(ui.item.label);
$("#CountryISO2").val(ui.item.value);
}
}
});
});
</script>
}
_Address.cshtml,_Region.cshtml, _City.cshtml and _Company.cshtml are partial views structured exactly like _Country.cshtml
_Contact.cshtml and _Company.cshtml can have text as substitute and the page behaviour is as reported, that is no icons.
Putting it all together results in (dependent upon the section chosen)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Register:</title>
<link href="/soteware/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="/soteware/Content/themes/soteware/soteware.min.css" />
<link href="/soteware/Content/site.css" rel="stylesheet"/>
<script src="/soteware/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<div style="float: left; margin-left: 4px">
<img alt="blue binary" src="/soteware/Images/binary on blue world.jpg" style="width: 100px" />
</div>
<div style="float: left; margin-left: 4px; padding-top: 25px;">
<p class="site-title"><a area="" href="/soteware/Account?Length=4">Home</a></p>
</div>
<div style="clear: left; float: left; margin-left: 4px">
<span class="site-tag">Add a little seasoning to your software soup.</span>
</div>
</div>
<div class="float-right">
<section id="login">
<ul>
<li><a href="/soteware/Account/Register" id="registerLink">Register</a></li>
<li><a href="/soteware/Account/Login" id="loginLink">Log in</a></li>
</ul>
</section>
<nav>
<ul id="menu">
<li><a href="/soteware/">Home</a></li>
<li><a href="/soteware/Home/About">About</a></li>
<li><a href="/soteware/Home/Contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<style>
/* TBD */
</style>
<hgroup class="title">
<h1>Register:</h1>
<h2>Create a new account.</h2>
</hgroup>
<form action="/soteware/Account/Register" method="post"><input name="__RequestVerificationToken" type="hidden" value="0IEEfkNWMpPCRxA7kIaGzaDMTxJA_-xFoUHuOSUZhtgrRaFCc8V8H-fkClt9J8ogpv2vgplliBEC5WZpdomLSSZKLI7OsP5LzYFfOydK6AA1" /><div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div> <div id="accordion">
<h3>This section is required</h3>
<div>
<label for="UserName">User name:</label>
<input data-val="true" data-val-length="The User name: must be at least 3 characters long." data-val-length-max="100" data-val-length-min="3" data-val-required="The User name: field is required." id="UserName" name="UserName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
<label for="Email">Email:</label>
<input data-val="true" data-val-required="The Email: field is required." id="Email" name="Email" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
<label for="Password">Password:</label>
<input data-val="true" data-val-length="The Password: must be at least 6 characters long." data-val-length-max="100" data-val-length-min="6" data-val-required="The Password: field is required." id="Password" name="Password" type="password" />
<span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
<label for="ConfirmPassword">Confirm password:</label>
<input data-val="true" data-val-equalto="The password and confirmation password do not match." data-val-equalto-other="*.Password" id="ConfirmPassword" name="ConfirmPassword" type="password" />
<span class="field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></span>
</div>
<h3>Add contact information now?</h3>
<div>
<label for="FirstName">First Name:</label>
<input class="text-box single-line" data-val="true" data-val-length="The field First Name: must be a string with a minimum length of 3 and a maximum length of 50." data-val-length-max="50" data-val-length-min="3" data-val-required="The First Name: field is required." id="FirstName" name="FirstName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
<label for="LastName">Last Name:</label>
<input class="text-box single-line" data-val="true" data-val-length="The field Last Name: must be a string with a minimum length of 3 and a maximum length of 50." data-val-length-max="50" data-val-length-min="3" data-val-required="The Last Name: field is required." id="LastName" name="LastName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
<label class="label-title" for="Billing_Address">Billing Address</label><label for="Address1">Address:</label>
<input class="text-box single-line" data-val="true" data-val-length="The Address: must be at least 3 characters long." data-val-length-max="50" data-val-length-min="3" data-val-required="The Address: field is required." id="Address1" name="Address1" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Address1" data-valmsg-replace="true"></span>
<label for="Address2">Suite or Apt:</label>
<input class="text-box single-line" data-val="true" data-val-length="The Suite or Apt: must be at least 3 characters long." data-val-length-max="50" data-val-length-min="3" data-val-required="The Suite or Apt: field is required." id="Address2" name="Address2" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Address2" data-valmsg-replace="true"></span>
<label for="Country">Country:</label>
<input class="text-box single-line" data-val="true" data-val-length="The Country: must be at least 3 characters long." data-val-length-max="50" data-val-length-min="3" data-val-required="The Country: field is required." id="Country" name="Country" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Country" data-valmsg-replace="true"></span>
<input data-val="true" data-val-length="The Country ISO2: must be at least 2 characters long." data-val-length-max="2" data-val-length-min="2" data-val-required="The Country ISO2: field is required." id="CountryISO2" name="CountryISO2" type="hidden" value="" />
<label for="Region">Prov or State:</label>
<input class="text-box single-line" data-val="true" data-val-length="The Prov or State: must be at least 3 characters long." data-val-length-max="50" data-val-length-min="3" id="Region" name="Region" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Region" data-valmsg-replace="true"></span>
<input data-val="true" data-val-number="The field RegionId must be a number." data-val-required="The RegionId field is required." id="RegionId" name="RegionId" type="hidden" value="0" />
<label for="City">City:</label>
<input class="text-box single-line" data-val="true" data-val-length="The City: must be at least 3 characters long." data-val-length-max="50" data-val-length-min="3" data-val-required="The City: field is required." id="City" name="City" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="City" data-valmsg-replace="true"></span>
<input data-val="true" data-val-number="The field CityId must be a number." data-val-required="The CityId field is required." id="CityId" name="CityId" type="hidden" value="0" />
<label for="PostalCode">Postal or Zip Code:</label>
<input class="text-box single-line" data-val="true" data-val-required="The Postal or Zip Code: field is required." id="PostalCode" name="PostalCode" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="PostalCode" data-valmsg-replace="true"></span>
<label for="PhoneNumber">Phone Number:</label>
<input class="text-box single-line" data-val="true" data-val-required="The Phone Number: field is required." id="PhoneNumber" name="PhoneNumber" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="PhoneNumber" data-valmsg-replace="true"></span>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="~/Content/themes/soteware/soteware.min.css" />
@*<link rel="stylesheet" href="~/Content/themes/smoothness/jquery-ui-1.10.3.custom.min.css" />*@
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
@RenderSection("seo", required: false)
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<div style="float: left; margin-left: 4px">
<img alt="blue binary" src="~/Images/binary on blue world.jpg" style="width: 100px" />
</div>
<div style="float: left; margin-left: 4px; padding-top: 25px;">
<p class="site-title">@Html.ActionLink("Home", "Index", "Home", new { area = "" })</p>
</div>
<div style="clear: left; float: left; margin-left: 4px">
<span class="site-tag">Spice up your life.</span>
</div>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
@if (User.IsInRole("SuperUser"))
{
<li>@Html.ActionLink("Manage", "Index", "Admin", new { area = "Admin" }, null)</li>
}
@if (User.Identity.IsAuthenticated)
{
<li>@Html.ActionLink("Blog", "Index", "Blog", new { area = "Blog" }, null)</li>
}
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - Allen Mayes Consulting</p>
</div>
</div>
</footer>
@RenderSection("scripts", required: false)
@section scripts {
@Scripts.Render("~/bundles/jquery")
}
</body>
</html>
Register.cshtml
@model soteware.Models.RegisterViewModel
@{
ViewBag.Title = "Register:";
}
<style>
/* TBD */
</style>
@section Scripts {
@* Bundles jQuery validate 1.10.3 and jQuery unobtrusive an unobtrusive Ajax *@
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
<script>
$(function () {
$("#accordion").accordion({ heightStyle: "content" });
});
</script>
}
<hgroup class="title">
<h1>@ViewBag.Title</h1>
<h2>Create a new account.</h2>
</hgroup>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary()
<div id="accordion">
<h3>This section is required</h3>
<div>
@Html.LabelFor(expression: m => m.UserName)
@Html.TextBoxFor(m => m.UserName)
@Html.ValidationMessageFor(m => m.UserName)
@Html.LabelFor(m => m.Email)
@Html.TextBoxFor(m => m.Email)
@Html.ValidationMessageFor(m => m.Email)
@Html.LabelFor(m => m.Password)
@Html.PasswordFor(m => m.Password)
@Html.ValidationMessageFor(m => m.Password)
@Html.LabelFor(m => m.ConfirmPassword)
@Html.PasswordFor(m => m.ConfirmPassword)
@Html.ValidationMessageFor(m => m.ConfirmPassword)
</div>
<h3>Add contact information now?</h3>
<div>
@Html.Partial(partialViewName: "_Contact")
</div>
<h3>Company Information</h3>
<div>
@Html.Partial(partialViewName: "_Company")
</div>
</div>
<p style="clear: both">
<input type="submit" value="Register" />
</p>
}
_Contact.cshtml
@model library.models.ContactViewModel
@Html.LabelFor(model => model.FirstName)
@Html.EditorFor(model => model.FirstName)
@Html.ValidationMessageFor(model => model.FirstName)
@Html.LabelFor(model => model.LastName)
@Html.EditorFor(model => model.LastName)
@Html.ValidationMessageFor(model => model.LastName)
@Html.Partial(partialViewName: "_Address", model: new library.models.AddressViewModel { AddressType = 0 })
@* Ask for shipping address(es) *@
@Html.Label(expression: "labelContactShippingAddress", labelText: "Ship To Address:")
@Html.CheckBox(name: "contactShippingAddress", htmlAttributes: new { id = "contactShippingAddress" })
@Html.HiddenFor(model => model.Registered)
@Html.ValidationMessageFor(model => model.Registered)
_Country.cshtml
@model library.models.CountryBase
@Html.LabelFor(model => model.Country)
@Html.EditorFor(model => model.Country)
@Html.ValidationMessageFor(model => model.Country)
@Html.HiddenFor(model => model.CountryISO2)
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script>
$(function () {
$("#Country").autocomplete({
source: '@Url.Action("Search", "Country")',
minLength: 1,
select: function (event, ui) {
if (ui.item) {
event.preventDefault();
$("#Country").val(ui.item.label);
$("#CountryISO2").val(ui.item.value);
}
}
});
});
</script>
}
_Address.cshtml,_Region.cshtml, _City.cshtml and _Company.cshtml are partial views structured exactly like _Country.cshtml
_Contact.cshtml and _Company.cshtml can have text as substitute and the page behaviour is as reported, that is no icons.
Putting it all together results in (dependent upon the section chosen)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Register:</title>
<link href="/soteware/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="/soteware/Content/themes/soteware/soteware.min.css" />
<link href="/soteware/Content/site.css" rel="stylesheet"/>
<script src="/soteware/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<div style="float: left; margin-left: 4px">
<img alt="blue binary" src="/soteware/Images/binary on blue world.jpg" style="width: 100px" />
</div>
<div style="float: left; margin-left: 4px; padding-top: 25px;">
<p class="site-title"><a area="" href="/soteware/Account?Length=4">Home</a></p>
</div>
<div style="clear: left; float: left; margin-left: 4px">
<span class="site-tag">Add a little seasoning to your software soup.</span>
</div>
</div>
<div class="float-right">
<section id="login">
<ul>
<li><a href="/soteware/Account/Register" id="registerLink">Register</a></li>
<li><a href="/soteware/Account/Login" id="loginLink">Log in</a></li>
</ul>
</section>
<nav>
<ul id="menu">
<li><a href="/soteware/">Home</a></li>
<li><a href="/soteware/Home/About">About</a></li>
<li><a href="/soteware/Home/Contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<style>
/* TBD */
</style>
<hgroup class="title">
<h1>Register:</h1>
<h2>Create a new account.</h2>
</hgroup>
<form action="/soteware/Account/Register" method="post"><input name="__RequestVerificationToken" type="hidden" value="0IEEfkNWMpPCRxA7kIaGzaDMTxJA_-xFoUHuOSUZhtgrRaFCc8V8H-fkClt9J8ogpv2vgplliBEC5WZpdomLSSZKLI7OsP5LzYFfOydK6AA1" /><div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display:none"></li>
</ul></div> <div id="accordion">
<h3>This section is required</h3>
<div>
<label for="UserName">User name:</label>
<input data-val="true" data-val-length="The User name: must be at least 3 characters long." data-val-length-max="100" data-val-length-min="3" data-val-required="The User name: field is required." id="UserName" name="UserName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span>
<label for="Email">Email:</label>
<input data-val="true" data-val-required="The Email: field is required." id="Email" name="Email" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>
<label for="Password">Password:</label>
<input data-val="true" data-val-length="The Password: must be at least 6 characters long." data-val-length-max="100" data-val-length-min="6" data-val-required="The Password: field is required." id="Password" name="Password" type="password" />
<span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span>
<label for="ConfirmPassword">Confirm password:</label>
<input data-val="true" data-val-equalto="The password and confirmation password do not match." data-val-equalto-other="*.Password" id="ConfirmPassword" name="ConfirmPassword" type="password" />
<span class="field-validation-valid" data-valmsg-for="ConfirmPassword" data-valmsg-replace="true"></span>
</div>
<h3>Add contact information now?</h3>
<div>
<label for="FirstName">First Name:</label>
<input class="text-box single-line" data-val="true" data-val-length="The field First Name: must be a string with a minimum length of 3 and a maximum length of 50." data-val-length-max="50" data-val-length-min="3" data-val-required="The First Name: field is required." id="FirstName" name="FirstName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
<label for="LastName">Last Name:</label>
<input class="text-box single-line" data-val="true" data-val-length="The field Last Name: must be a string with a minimum length of 3 and a maximum length of 50." data-val-length-max="50" data-val-length-min="3" data-val-required="The Last Name: field is required." id="LastName" name="LastName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span>
<label class="label-title" for="Billing_Address">Billing Address</label><label for="Address1">Address:</label>
<input class="text-box single-line" data-val="true" data-val-length="The Address: must be at least 3 characters long." data-val-length-max="50" data-val-length-min="3" data-val-required="The Address: field is required." id="Address1" name="Address1" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Address1" data-valmsg-replace="true"></span>
<label for="Address2">Suite or Apt:</label>
<input class="text-box single-line" data-val="true" data-val-length="The Suite or Apt: must be at least 3 characters long." data-val-length-max="50" data-val-length-min="3" data-val-required="The Suite or Apt: field is required." id="Address2" name="Address2" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Address2" data-valmsg-replace="true"></span>
<label for="Country">Country:</label>
<input class="text-box single-line" data-val="true" data-val-length="The Country: must be at least 3 characters long." data-val-length-max="50" data-val-length-min="3" data-val-required="The Country: field is required." id="Country" name="Country" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Country" data-valmsg-replace="true"></span>
<input data-val="true" data-val-length="The Country ISO2: must be at least 2 characters long." data-val-length-max="2" data-val-length-min="2" data-val-required="The Country ISO2: field is required." id="CountryISO2" name="CountryISO2" type="hidden" value="" />
<label for="Region">Prov or State:</label>
<input class="text-box single-line" data-val="true" data-val-length="The Prov or State: must be at least 3 characters long." data-val-length-max="50" data-val-length-min="3" id="Region" name="Region" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Region" data-valmsg-replace="true"></span>
<input data-val="true" data-val-number="The field RegionId must be a number." data-val-required="The RegionId field is required." id="RegionId" name="RegionId" type="hidden" value="0" />
<label for="City">City:</label>
<input class="text-box single-line" data-val="true" data-val-length="The City: must be at least 3 characters long." data-val-length-max="50" data-val-length-min="3" data-val-required="The City: field is required." id="City" name="City" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="City" data-valmsg-replace="true"></span>
<input data-val="true" data-val-number="The field CityId must be a number." data-val-required="The CityId field is required." id="CityId" name="CityId" type="hidden" value="0" />
<label for="PostalCode">Postal or Zip Code:</label>
<input class="text-box single-line" data-val="true" data-val-required="The Postal or Zip Code: field is required." id="PostalCode" name="PostalCode" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="PostalCode" data-valmsg-replace="true"></span>
<label for="PhoneNumber">Phone Number:</label>
<input class="text-box single-line" data-val="true" data-val-required="The Phone Number: field is required." id="PhoneNumber" name="PhoneNumber" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="PhoneNumber" data-valmsg-replace="true"></span>
<label for="labelContactShippingAddress">Ship To Address:</label>
<input id="contactShippingAddress" name="contactShippingAddress" type="checkbox" value="true" /><input name="contactShippingAddress" type="hidden" value="false" />
<input data-val="true" data-val-required="The Registered field is required." id="Registered" name="Registered" type="hidden" value="" />
<span class="field-validation-valid" data-valmsg-for="Registered" data-valmsg-replace="true"></span>
</div>
<h3>Company Information</h3>
<div>
<label for="Name">Company Name:</label>
<input class="text-box single-line" data-val="true" data-val-length="The Company Name: must be at least 3 characters long." data-val-length-max="50" data-val-length-min="3" data-val-required="The Company Name: field is required." id="Name" name="Name" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
<label for="Title">Title:</label>
<input class="text-box single-line" data-val="true" data-val-length="The Title: must be at least 3 characters long." data-val-length-max="50" data-val-length-min="3" data-val-required="The Title: field is required." id="Title" name="Title" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Title" data-valmsg-replace="true"></span>
<label class="label-title" for="Billing_Address">Billing Address</label><label for="Address1">Address:</label>
<input class="text-box single-line" id="Address1" name="Address1" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Address1" data-valmsg-replace="true"></span>
<label for="Address2">Suite or Apt:</label>
<input class="text-box single-line" id="Address2" name="Address2" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Address2" data-valmsg-replace="true"></span>
<label for="Country">Country:</label>
<input class="text-box single-line" id="Country" name="Country" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Country" data-valmsg-replace="true"></span>
<input id="CountryISO2" name="CountryISO2" type="hidden" value="" />
<label for="Region">Prov or State:</label>
<input class="text-box single-line" id="Region" name="Region" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="Region" data-valmsg-replace="true"></span>
<input id="RegionId" name="RegionId" type="hidden" value="0" />
<label for="City">City:</label>
<input class="text-box single-line" id="City" name="City" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="City" data-valmsg-replace="true"></span>
<input id="CityId" name="CityId" type="hidden" value="0" />
<label for="PostalCode">Postal or Zip Code:</label>
<input class="text-box single-line" id="PostalCode" name="PostalCode" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="PostalCode" data-valmsg-replace="true"></span>
<label for="PhoneNumber">Phone Number:</label>
<input class="text-box single-line" id="PhoneNumber" name="PhoneNumber" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="PhoneNumber" data-valmsg-replace="true"></span>
<label for="labelCompanyShippingAddress">Ship To Address:</label>
<input id="companyShippingAddress" name="companyShippingAddress" type="checkbox" value="true" /><input name="companyShippingAddress" type="hidden" value="false" />
</div>
</div>
<p style="clear: both">
<input type="submit" value="Register" />
</p>
</form>
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2013 - Allen Mayes Consulting</p>
</div>
</div>
</footer>
<script src="/soteware/Scripts/jquery-2.0.3.js"></script>
<script src="/soteware/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/soteware/Scripts/jquery.validate.js"></script>
<script src="/soteware/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/soteware/Scripts/jquery-ui-1.10.3.js"></script>
<script>
$(function () {
$("#accordion").accordion({ heightStyle: "content" });
});
</script>
</body>
</html>
Leave a comment on allen's reply
Hi Mike,
I tried your suggestion; downloaded the bundled theme and used the packaged script. This did not fix the problem.
Leave a comment on allen's reply
After many hours of searching I finally found the answer by viewing the source, not clicking the View Source link, on the UI API Accordion page. I found that simply including the Theme Roller custom theme is insufficient for styling the Widget.
This resulted in a new Style.Bundle
StyleBundle("~/Content/themes").Include(
"~/Content/themes/base/jquery-ui.css",
"~/Content/themes/base/jquery.ui.all.css",
"~/Content/themes/base/jquery.ui.base.css",
"~/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.theme.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.menu.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.spinner.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.tooltip.css"));
Which I will pare down when I finalise which UI Widgets the site will use.
This resulted in a new Style.Bundle
StyleBundle("~/Content/themes").Include(
"~/Content/themes/base/jquery-ui.css",
"~/Content/themes/base/jquery.ui.all.css",
"~/Content/themes/base/jquery.ui.base.css",
"~/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.theme.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.menu.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.spinner.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.tooltip.css"));
Which I will pare down when I finalise which UI Widgets the site will use.
Leave a comment on allen's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to allen's question